Increasing the size of Font Awesome icons?

Increasing the size of Font Awesome icons?
0.0 0


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!