Menu
I tried changing font awesome sizes using font-size but it doesn't work because of this css:
font-size: inherit
Is there a way to override this? I am trying to have font-awesome to be two different sizes when mobile or screen and I want to affect the font-size using css and not different sized font-awesome tags. What can I do?
663
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x , fa-3x , fa-4x , or fa-5x classes. If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
font-awesome icons are texts. So use font-size to increase the size of font-awesome icons. Show activity on this post. To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
To change the size of your text with inline CSS, you have to do it with the style attribute. You type in the font-size property, and then assign it a value.
Usually font-awesome icons get the size of the element they are used within (i.e. inherit). For example:
HTML
<p><i class='fa fa-pencil'></i> Some text here.</p>
CSS
p{
font-size: 16px;
}
Your icon will be of 16px size in that case.
However you can resize icons separately. First of all, make sure that your css file goes after font-awesome.css in <head> block for it to be in priopity or use !important.
1) You can rewrite 'fa' class styles from font-awesome.css in your own css file:
.fa{
font-size: 3em !important; /*size whatever you like*/
}
2) Or give icon some other class and style it:
.newclass-for-i{
font-size: 3em;
}
To set different styles for mobile and screen use css media queries:
@media (max-width:desired width){
your styles
}
You can update the font-size of a FA icon using the before pseudo-element. No need for extra wrapper elements or rewriting classes.
i.fa::before{
font-size: 40px;
}
you can use an extra class or id e.g.
<i class="fa fa-search large_icon"></i>
and the style it using css
.large_icon{
font-size:24pt;
}
font awesome has classes for size such as fa-2x, fa-3x etc...
For example:
<i class="fas fa-user fa-2x">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
