Increasing the size of Font Awesome icons?

Increasing the size of Font Awesome icons?


I’m trying to increase the size of my Font Awesome icons on my mobile version of my portfolio:

I tried adding style tags, but those did not work. I can’t figure it out.

Here is the code:

Is it okay if someone gives me feedback on how the site works on mobile? I’ve only used dev tools, as I have no mobile, so can’t see how it looks and feels that well.

Thanks in advance!


You can simply change the font-size of the i.fa's

  font-size: 30px;


Okay, I’ll try it out. Thank you!


Didn’t work. I added it as a separate class and applied it to the icons, but they are still the same size. :confused:


Assuming that the icon is named fa-some_icon try

.fa.fa-some_icon {
font-size: 30px; /Some size here/

As the name suggests fa can be manipulated just like regular fonts


Font Awesome includes a set of classes to increase the icons relative to their container. Can you use these?

fa-lg (33% increase) or fa-2x, fa-3x, fa-4x, or fa-5x

See under ‘Larger Icons’


I just tested this:

.mobile-button .fa{
  font-size: 50px;

It sets the font-size to 50px on mobile.html

Also, using /css/style.css instead css/style.css (and with all the other links) doesn’t work for me.


Awesome, I’ll give it a go!


Does it only do it on mobile.html, not index.html?


As long as you don’t use .mobile-button in index.html it won’t.


Okay, thank you very much!