CSS Flight Loader

Why won’t my font awesome icon show? I’m sure it is the correct unicode I’m using… at least the font Awesome cheatsheet says it is.

The font-family should be "Font Awesome 5 Free"

1 Like

Thank you. :slightly_smiling_face: But my icon is still not showing.

First, you have to put quotes around the font-family value since it contains spaces:

font-family: "fontAwesome 5 Free";

Second, I don’t think you are using font awesome correctly. You are linking to the CSS file correctly but you aren’t using it correctly on your page. You need to include the font awesome class on the element you want to display the icon in. There is a ‘rocket’ icon that uses the class fa-rocket, so add the following two classes to the rocket div:

fa fa-rocket

1 Like

Got it! Thank you so much!

It works fine for me without the class name, might be a cache issue?

Here are the fontawesome pseudo-elements docs has well

1 Like

Thank you! Yes, it worked for me without the class name too as long as I put the quotes around the font-family as suggested by @bbsmooth. i put the class name anyway though because it wouldn’t hurt anything.

1 Like

That’s what I said.

But whatever, good to hear it is working for you. Happy coding!

1 Like

Oops, sorry @lasjorg I didn’t notice the quotes around yours. My bad. Thank you for your help!

You can check out the rules for valid family names.

In general, if the name has a whitespace (spaces) it is often best to just use a string. However, if it is using valid identifiers, like the one shown in the MDN example Gill Sans Extrabold, you do not have to use a string.

However, in the case of the font awesome name, the family name contains a number (5) which is not a valid identifier and it needs to be escaped.

So this should work as well:

font-family: Font Awesome "5" Free;

1 Like