Font-awesome not so awesome for me!

HTML-CSS
1

Hi - I tried posting this at the bottom of another thread that was all about the same problem I am having (and described below) but I was not getting any responses so trying with a new thread:

My font-awesome resource is not working. I just get a blank square in place of an icon.

I checked the version of font-awesome. I had loaded up the one listed in the W3schools page which is:
“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”.

That didn’t work so then I tried the link given in a FCC thread:
“https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”.

But it still doesn’t work.

My codepen here >>> https://codepen.io/sabahatiqbal/pen/jzMwmL?editors=0100.

Help would be much appreciated!

2

I think this:

<i class="fab fa-twitter">Twitter</i></a>

needs to be like this:

<i class="fa fa-twitter">Twitter</i></a>

I’m just going by the code here, specifically in the “Building the featured section” where they use font-awesome icons. I honestly haven’t really messed around too much with BS but it seems changing fab to fa makes the icons appear.

1 Like
3

I tried plugging these in and it seemed to work.

https://fontawesome.com/get-started/web-fonts-with-css

Then grab the icons from here.

https://fontawesome.com/icons?d=gallery

1 Like
4

That totally worked! Thanks! But now I’m confused about why the font-awesome website would have the wrong syntax…??

5

That’s a really good question…

I took a look at your link and maybe it has something to do with Bootstrap vs Font-Awesome 5. Maybe BS only uses version 4, which might account for the “fa” vs the “fab”?
Check out the “style and prefixes” section here. It mentions the “fab” version in conjunction with 5.

I’m not 100% on this theory btw, I’ve personally only used FA 4 in the past and not through bootstrap but just straight on its own. Maybe someone else has some input?

Either way I’m glad it’s working now!

1 Like