Increasing the size of Font Awesome icons?

HTML-CSS
1

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

https://giacomolaw.github.io/mobile.html

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

Here is the code: https://github.com/GiacomoLaw/giacomolaw.github.io/blob/master/mobile.html

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!

2

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

.fa{
  font-size: 30px;
}
1 Like
3

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

4

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

5

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

6

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 http://fontawesome.io/examples/ under ‘Larger Icons’

7

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
8

Awesome, I’ll give it a go!

9

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

10

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

1 Like
11

Okay, thank you very much!