I am having trouble getting Font Awesome to work on my site – as I detail in the following video: Loom | Free Screen & Video Recording Software | Loom
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 
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:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">fas for the Solid Setfar for the Regular Setfabfor the Brands Setfal for the Light SetI 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
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
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
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?
Unfortunately, I don’t know any streamlined method, I just copy and paste. If you find a better way, please tag me in!
Okay, shall do.
Be well,
Moshe
Hello, I also have today the same problem for ‘angle-down’, if I copy the uni-code the ‘caret down’ of FA 900 solid is not showing up. Caret Down Icon | Font Awesome
Do you have also this problem? Cinema4You - DUMBO Exclusief in 6D
Cart Arrow Down Icon | Font Awesome
@KarelRosseel82 - https://www.cinema4you.be/film/info/804 That is not a webflow site right?.
