I'm trying to stack icons as explained here https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/stacking-icons
but in my project i'm using vuejs and vuetify my icons are thus inside a v-icon element.
Here is what i tried :
<div class="fa-stack fa-2x">
<v-icon>fas fa-camera fa-stack-1x</v-icon>
<v-icon>fas fa-ban fa-stack-2x</v-icon>
</div>
It just show the icon one after the other and not stacked.
Any idea on what i'm missing ? Or is it possible at all ?
Stacked Icons styling approach of Font Awesome apparently is not supported by Vuetify v-icon so far. The good news is you still can implement this feature just with regular HTML tags such as div, i, span, ..etc.
I have attached an example of 2 Vuetify buttons. One of them is implemented with the stacked icons and the other one with Vuetify v-icon.
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.5.1/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-row align="center" justify="space-around">
<v-btn>
search
<span class="ml-2 fa-stack fa-1x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-search fa-stack-1x fa-inverse"></i>
</span>
</v-btn>
<v-btn>
search
<v-icon class="ml-2">fas fa-search</v-icon>
</v-btn>
</v-row>
</v-app>
</div>
<div style="position: relative;" class="mx-2">
<v-icon style="position: absolute; top: 8px; left:8px" dense color="white">
$cloud
</v-icon>
<v-icon color="red" x-large>
$ban
</v-icon>
</div>
I was unable to get the accepted answer to work since I am doing the alternate way of loading font awesome icons. This does seem to work though - however I suggest making classes for the styles.
Update 2022-01-20
Apparently at some point font awesome renamed stack to layers so you can use the vue font awesome library components
<font-awesome-layers class="fa-2x mx-2">
<font-awesome-icon :icon="['fad', 'cloud']" transform="shrink-8 left-2" />
<font-awesome-icon :icon="['fas', 'ban']" class="red--text" />
</font-awesome-layers>
Related
How can I center the text inside a v-chip component vertically?
Since it's a vuetify component, I looked at the documentation but there's no such property for this.
<v-chip
v-if="this.drawerNodeData.type == 'Telecom'"
:color="telecom"
text-color="white"
class="chips"
>
{{ this.drawerNodeData.type }}
</v-chip>
As you said styles for chips class are not yet implemented. In that case your code should work as per the requirement as by default chip text center aligned vertically and horizontally. Here is the demo :
new Vue({
el: '#app',
vuetify: new Vuetify()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"/>
<div id="app">
<v-app id="inspire">
<v-container>
<v-chip color="primary" text-color="white">Default</v-chip>
</v-container>
</v-app>
</div>
I'm currently working on a project based on Vuetify. I need to insert a <a> tag and icon inside an internationalization text. Generally, it is easy to insert a variable as below shows,
this.$vuetify.lang.$t('I'm {0}', varirable_name)
but in this way, I cannot insert <a> tag or an icon <v-icon>, how could I achieve it?
Just like this,
`this.$vuetify.lang.$t('Here is an icon {0} and a {1}', <v-icon />, <a>link</a>)`
You can use v-html directive to output raw HTML. It will work for basic tags but won't work for Vuetify's v-tags (for example, v-icon).
new Vue({
vuetify: new Vuetify(),
data() {
return {
message: this.$vuetify.lang.t('Here is an bold {0} and a {1}', "<strong>text</strong>", "<a>link</a>")
}
}
}).$mount('#app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container><span v-html="message"></span ></v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I wouldn't recommend using Vuetify tags in composite format strings. Instead, translate the text inside of the tag.
<v-btn class="ma-2" color="primary" dark>
Accept // <- translate only this
<v-icon dark right>
mdi-checkbox-marked-circle
</v-icon>
</v-btn>
Vuetify v-icon usually takes its color with a class. In my case, I am trying to change its color with a css class menu-icon when my router link is active.
<v-btn icon class="menu-btn">
<router-link to="/client/dashboard">
<v-icon class="menu-icon">
mdi-gauge-full
</v-icon>
<div class="menu-titles">Dashboard</div>
</router-link>
</v-btn>
.router-link-active .menu-icon {
color: #2F80ED ;
}
The problem is v-icon does not seems to accept css color attribute. Is there a way to change it with css ?
<v-icon> uses the value of its CSS color property and maps it into the fill property of it's SVG children (using fill="currentColor").
So you only need to set the color CSS value on .v-icon, and it will work:
Simple example:
<v-icon large>mdi-domain</v-icon>
In CSS:
i.v-icon.v-icon {
color: red;
}
Working example:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
i.v-icon.v-icon {
color: red;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-icon>mdi-domain</v-icon>
</v-content>
</v-app>
</div>
I advise against using !important.
By default, Vuetify sets the color of icons using a 2 × class specificity (i.e: .theme--light.v-icon), so we need to use something slightly higher i.v-icon.v-icon ( 1 × el + 2 × class ).
Obviously, if you want to do it inline you can always go with the anti-pattern of inline style:
<v-icon large style="color: red;">mdi-domain</v-icon>
Like any anti-pattern, it's not recommended. But it's possible.
Maybe this can help
<v-icon large color="green darken-2">mdi-domain</v-icon>
Or if you want to change color using internal css, you can add a style tag like this at the end.
<style lang="scss" >
.classname {
color: red !important;
}
</style>
In my case, didn't work putting the color's name, but it worked putting the hexadecimal value:
<v-icon color="#933">mdi-close</v-icon>
Despite the fact that in the documentation of the Vuetify icons, you find that it works by putting the names. But is required put v-app tag in vue template. Let it start this way:
<template>
<v-app>
<v-icon color="red">mdi-close</v-icon>
</v-app>
</template>
You should add to your css file:
.theme--light.v-icon,
.theme--dark.v-icon {
color: inherit !important;
}
How do I remove the background behind the button when I hover or clicking on the v-btn?
I try to set ripple to false, but still have background. I can't find the css does this background.
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.2.15/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.2.15/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-card flat>
<v-card-text>
<v-container fluid class="pa-0">
<v-row>
<v-col cols="12">
<p>Normal</p>
</v-col>
<v-col cols="12" sm="3">
<v-btn ripple="false" icon color="pink">
<v-icon>mdi-heart</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</v-app>
</div>
For the background when click (ripple features) , you missing the bind annotation, you are passing the string instead of false value. So put the ":" before ripple will do the job.
However, to do with the hover background things, you need to do some hack in css. I'm writing this in scss, you can follow the idea
<v-btn :ripple="false" icon color="pink" id="no-background-hover">
<v-icon>mdi-heart</v-icon>
</v-btn>
<style lang="scss">
#no-background-hover::before {
background-color: transparent !important; <= can set to any color you want
}
</style>
the code above is only set to that specific button with id "no-background-hover" only, if you want this to happen to every other button. Then here is the class of that button, you can change your css query selector to the class level you need
<button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default pink--text" id="no-background"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-heart theme--light"></i></span></button>
I was looking for an answer to this question for some time, I applied a hacked solution from here, but it has visual effects, Thank God I found a property that is responsible for this. You need to add a "plain" property to the button like this:
<v-btn fab large plain><v-icon>mdi-phone</v-icon></v-btn>
This was made a deal for me.
Vuetify guide saying: plain buttons have a lower baseline opacity that reacts to hover and focus.
To take out the background on v-btn, you can use the following css property,
<style scoped>
.v-btn::before {
background-color: transparent;
}
</style>
to remove the ripple effect, you have to use v-ripple,
<v-btn v-ripple="false" icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
Adding the plain prop should do the trick. According the description it will remove "the default background change applied when hovering over a button":
*Wanted to simplify the previous answer, but the edit queue was full.
I'm very confused with basic example of vuetify template. I have prepared codepen here: https://codepen.io/Disorrder/pen/aPpeBW
This example works as expected. I have page with toolbar and filled all space except toolbar with content. And it works nice without overflowing.
Also this code was described here in official docs: https://vuetifyjs.com/en/getting-started/quick-start#cdn-install
But! I have this absolutely same html code below. You can just create html file and run in browser, and see the broblem. Page overflows on toolbar height, so it seems v-container stratches on 100vh instead of 100% of parent's height. I can't understand this and give up. :(
Screenshot: https://yadi.sk/i/cGIfK2iH_Clxyg
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<title>Test</title>
<script>
window.onload = () => {
new Vue({
el: '#app',
});
};
</script>
</head>
<body>
<div id="app">
<v-app>
<v-toolbar app dense>
<v-toolbar-title>Toolbar</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout style="background: #bed;"></v-layout>
</v-container>
</v-content>
</v-app>
</div>
</body>
</html>
oh... I think, I found solution. If you add <!DOCTYPE html> at the beginning of the code, it works as a brilliant. But what a hell? Can anybody explain this magic?