CODEWITHSUNDEEP
font-awesome
Jwan622
Jwan622

Reputation: 11649

Changing font-awesome size in css. How do you do it?

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?

Upvotes: 11

Views: 40519

Answers (4)

Gary Jorgenson
Gary Jorgenson

Reputation: 61

font awesome has classes for size such as fa-2x, fa-3x etc...

For example:

<i class="fas fa-user fa-2x">

Upvotes: 3

Waqas Ahmed
Waqas Ahmed

Reputation: 31

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;
}

Upvotes: 2

Bilow
Bilow

Reputation: 316

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;
}

Upvotes: 2

chem1st
chem1st

Reputation: 1634

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
}

Upvotes: 27

Related Questions