How do you change the color of a fontawesome icon in nuxt? I gave the icon a class name and set the color: #444444" but it doesn't seem to work. The font-size property worked for the icon though.
<div class="icons">
<font-awesome-icon
:icon="['fab', 'github-square']"
class="icons__btn icons__github"
/>
<font-awesome-icon
:icon="['fab', 'twitter-square']"
class="icons__btn icons__twitter"
/>
</div>
.icons {
margin-bottom: 5rem;
&__btn {
margin-top: 2rem;
font-size: 5rem;
color: red;
}
&__twitter {
margin-left: 1rem;
}
}
You should check again whether your fontawesome module is loaded right, or check again whether your css code is compiled right.
I did a demo of use fontawesome in nuxt, hope it will help you.
Related
I want to change the font size of "attendance",which is the content of label.
<v-checkbox
v-model="course.evaluation"
label="attendance"
></v-checkbox>
Here is what I've tried. Inside the same vue file, I added
<style>
.v-checkbox.v-label {
font-size: 10px;
}
</style>
But it didn't work. Anyone can help?
Try increasing priority by adding chaining selectors
Add a class to the checkbox
<v-checkbox
class="my-checkbox"
v-model="course.evaluation"
label="attendance"
></v-checkbox>
Then
<style>
.my-checkbox .v-label {
font-size: 10px;
}
or In case it still doesn't reflect the override then use deep selector
::v-deep .my-checkbox .v-label {
font-size: 10px;
}
You are using wrong css selectors. You may solve your problem this way:
<style>
.v-input--checkbox .v-label {
font-size: 10px;
}
</style>
But keep in mind that if your component contain more than one v-checkboxes, all of them will have their font changed.
Another solution is to override label slot this way:
<v-checkbox
v-model="course.evaluation">
<template v-slot:label>
<span style="font-size: 10px">attendance</span>
</template>
</v-checkbox>
I have a v-combobox that I need to resize. This solution works pretty well, but I have a problem with delete icon in combobox:
How can I solve it?
Here is combobox code and styling
<v-combobox
outlined
clearable
></v-combobox>
.v-text-field .v-input__control .v-input__slot {
min-height: 30px;
}
This worked for me:
<style>
.v-text-field .v-input__control .v-input__slot {
min-height: 30px;
}
.v-text-field.v-text-field--enclosed .v-input__prepend-outer, .v-text-field
.v-text-field--enclosed .v-input__prepend-inner, .v-text-field.v-text-field--enclosed
.v-input__append-inner, .v-text-field.v-text-field--enclosed .v-input__append-outer {
margin-top: 5px;
}
</style>
I am using the SmartAdmin v1.9.1 template with Angular 5. It came with FontAwesome v4.7.3 Pro, and it uses Bootstrap v3.3.6. I have upgraded FA to v5.10.0, using npm install --save-dev #fortawesome/fontawesome-free.
My question is not a duplicate of this SO question, but similar.
The upgrade has gone smoothly, just needed to change a few fa- icons.
I'm hung up on getting the Bootstrap checkbox icon to display. It displayed fine with v4.7.3, but now I get a small box, where the check mark icon should be - see below.
The CSS below shows the checkbox style. I have tried other content than '\f00c', but same problem. Adjusting the font: does result in changes in size, but the small box remains.
Relevant HTML:
<section>
<label class="checkbox">
<input type="checkbox" name="remember" checked (click)="doCheckbox()">
<i></i>Stay signed in</label>
</section>
Relevant CSS:
.smart-form .checkbox input + i:after {
content: '\f00c';
top: -1px;
left: 1px;
width: 15px;
height: 15px;
font: normal 16px/19px FontAwesome;
text-align: center;
}
.smart-form .checkbox input:checked:hover + i:after {
content: '\f00d';
}
.smart-form .checkbox input:checked:disabled:hover + i:after {
content: '\f00c';
}
I appreciate your help!
Use it like shown below.
Add "fa" class on i tag and move the CSS from i:after tag to i tag
.smart-form .checkbox input+i {
font-family: "Font Awesome 5 Pro";
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.smart-form .checkbox input+i:after {
content: '\f00c';
}
.smart-form .checkbox input:checked:hover+i:after {
content: '\f00d';
}
.smart-form .checkbox input:checked:disabled:hover+i:after {
content: '\f00c';
}
<script src="https://kit.fontawesome.com/ff81d4d106.js"></script>
<section class="smart-form">
<label class="checkbox">
<input type="checkbox" name="remember" checked (click)="doCheckbox()">
<i class="fa"></i>Stay signed in</label>
</section>
I am trying to use vue bootstrap and I want to set custom colors for my theme I also want to allow my users to switch to a dark theme with a button. I installed vue-bootstrap I have it working just fine I went and followed the instructions on bootstrap4 how to customize the theme so I made a custom.scss file in my assets folder and added this code.
$theme-colors: (
"kimbel-prime": #091F40,
"kimbel-success": #7FC343,
"kimbel-warn": #C74241,
"kimbel-danger": #6E0C2B
);
#import "node_modules/bootstrap/scss/bootstrap";
in order to use this I read on a github site that you ahve to import all of this inside your app.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<b-button variant="kimbel-primary"> I am a Button </b-button>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
#import "assets/custom.scss";
#import "~bootstrap/scss/bootstrap.scss";
#import '~bootstrap-vue/dist/bootstrap-vue.css';
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
I added this and was hoping to see my button get the new color but it still had just a button color any help would be greatly apperciated this is my first time I am trying to use vue so forgive me for anything I am missing. I think I can tackle switching to a dark theme after I get this working.
I'm having trouble overriding bootstrap styles in my single file component when using bootstrap-vue
My file looks like this:
<template>
<b-tabs pills vertical>
<b-tab title="This title" title-item-class="mytab" acitve>
Some tab
</b-tab>
<b-tab title="This title 2" title-item-class="mytab">
Some other tab
</b-tab>
</b-tabs>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.nav-pills .mytab .nav-link:not(.active) {
background-color: red !important;
}
.nav-pills .mytab .nav-link {
background-color: blue !important;
}
.tab-content > .tab-pane {
border: 1px solid;
border-left: 0px none;
}
</style>
I can inspect my component and I can see that the "mytab" class is being added to the li parent divs with nav-item classname but the css isn't showing up.
It works here: https://jsfiddle.net/3xwmm1qt/43/ but I'm pretty sure it's because the css is being loaded after the page renders. I'm not 100% about that.
Updated I also tried removing the 'scoped' attribute from the style tag and the css still would work. It still doesn't even show up when I inspect the div. I can still see the classname, but in the Rules tab (using FF) there's no styling for my custom classname.
Yeah the difference between the jsfiddle and your code is that you've written scoped CSS (less):
Here's how you fix it, Remove the scoped from style:
<style lang="less">
.nav-pills .mytab .nav-link:not(.active) {
background-color: red !important;
}
.nav-pills .mytab .nav-link {
background-color: blue !important;
}
.tab-content > .tab-pane {
border: 1px solid;
border-left: 0px none;
}
</style>
Scoped means that the css code will only work in this element and vue will try to do it only for the classes attached to the elements which have the class you tried to override while not being scoped means that it'll do it for the entire document hence will override bootstrap's css.