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;
1 Like

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.

1 Like

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.

1 Like

Okay, thank you very much!