Font Awesome icon size not increasing

13
votes

I have Font Awesome icons installed on this site. The icons size isn't increasing even after adding the class to increase size.

<ul class="stay-connected-inner list-inline">
  <li><a href="#"><i class="fa fa-twitter fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-medium fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></a></li>
</ul>
7
htmlcssfont-awesome
what is "the class to increase size"? fa-3? fa-3 isn't declared. – Roy Bogado
Yes. fa-3 is the class to increase the icon size. – user379888
change fa-3 tofa-3x – Prasath V
Nop, fa-3 is not declared. just add .fa-3{font-size:20px} – Roy Bogado

7 Answers

26
votes

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

            <ul class="stay-connected-inner list-inline">
              <li><a href="#"><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-medium fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li>
            </ul>
14
votes

font-awesome icons are texts. So use font-size to increase the size of font-awesome icons.

For eg.,

i {
    font-size: 18px;
}
2
votes

For font awesome icons sizing please check this link. http://fontawesome.io/examples/

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
1
votes

I had the same problem. For some reason the fa class is overriding the fa-2x class on the awesome font library. I found a blog that they knew it was an issue back in 2014 but haven't addressed it yet. On my site I added the style class again and added !important which fixed my problem.

<style>
      .fa-2x{
        font-size:2em !important;
    };
</style>
0
votes

use following inline css 

<style type="text/css">
    .fa-3{
      font-size: 30px;
    }
</style>
0
votes

if you are using font awesome or font awesome pro icons in Angular 5+ using svg with Javascript. The easy way to increase your custom font size is: 

.svg-inline--fa{
  font-size:1.500em; //use your custom font size. If you do not want to apply the font awesome size classes
}

Apply this in your custom component to see the changes immediately.

0
votes

In my case setting fa fa-5x, or font-size or height didn't help, but:

 width: 20px !important; // 20px is an example value

Also be cautious if you have padding applied!