Streaming live at 10am (PST)

Can't Get Font Awesome to Work


#1

I am having trouble getting Font Awesome to work on my site – as I detail in the following video: https://www.useloom.com/share/e105b35e7a9d44e5ae41060a7f439b89

The steps I took are based on the following tutorials step-by-step (which I believe I am following correctly:

Can someone please let me know if I am doing something wrong and, if so, what I can do to fix it.

Thanks in advance :slight_smile:


#2

Hey @moshemo I hope you’re having a great day.

First of all, thanks for the detailed video, the solution is simple:
You are putting some <head></head> custom code and trying to see it on preview, but it doesn’t work. If you publish and see your web site live, it will work as it should.

From what I saw on the video you already know some of the things I explain bellow, but it can help others in the future.

For me the best workflow is to use an Embed element and put the Font Awesome’s CDN link there, so you can see your icons within the Designer interface while editing.

Step-by-step:

  • Insert a Embed element
  • Paste the Font Awesome’s CDN link: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  • Place the icon’s Unicode Glyph on any text element (heading, text block, paragraph, etc)
    – You can get the Unicode Glyphs at: https://fontawesome.com/icons
  • Give your text element one of the following classes
    fas for the Solid Set
    far for the Regular Set
    fabfor the Brands Set
    fal for the Light Set

I think this is the easiest workflow. When you are done, if you don’t like the embed code, you can just cut it and put on the <head></head>

Let me know if you need some other way to use it.

You can see it live on the following link:
https://preview.webflow.com/preview/font-awesome-example?utm_source=font-awesome-example&preview=1e9095ace3ec56d241c972f467a34a73


#3

First of all - thanks. Your method (with the embed element) worked.

And I understand now why I couldn’t get it to work via-preview.

However, in at least one of the tutorials I saw – adding the unicode or the glyph code worked without needing to publish. So I’m wondering why those methods didn’t work.

Either way – your method worked perfectly (and I can see it in the editor without having to publish).

With that said, I would really like it if Webflow would just add a icon-font element (with the ability to add whichever font icon sets that we want). I already noted that on the wishlist page.

Thanks again,

Moshe


#4

Hey again @moshemo

I tried the other methods of uploading the fonts and it worked for me, then I watched again you video to see what was missing and the I saw that you uploaded the Regular Set and used the TH character.

The problem was that the TH character with Regular Set, is only avaliable using the Font Awesome Pro. You could upload the Solid Set and use the TH character or use other characters avaliable from the Regular Set.

I hope that was clear. My best regards,

Gilson


#5

Once again, thanks. And nice job on catching that mistake

On a related note – in terms of your method (which his what I’m now using). How do you use that on all pages of your site? Do you create a symbol for the embed element and just include it on all pages? Is there a more streamlined method?


#6

Unfortunately, I don’t know any streamlined method, I just copy and paste. If you find a better way, please tag me in!


#7

Okay, shall do.

Be well,

Moshe