Streaming live at 10am (PST)

Getting Fontawesome 5 to work


Hi All,
Is there currently a way to install Fontawesome 5 fonts into Webflow (like you can with Version 4) and access the icons by choosing the font and copying in the correct code?

I can install the fonts but they just appear as text at the moment.

Many thanks,

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Can't Get Font Awesome to Work

Sure, you need to add the “CSS Content” code into the actual text element. Just highlight the dummy text and copy the code over it. It’s all best to add the classname of that icon into the Selector classname in the styles panel.


Thanks Gary but I think I’m already doing this if I read you correctly. I have tested with version 4 and it works but if I upload the version 5 web fonts and use the new code nothing happens.
I have uploaded the version 5 fonts, changed the class of the link block to the correct fa font and copied and pasted the code into the text (for example: f35a for an arrow-alt-circle-right) exactly like I would have done with font awesome version 4 but it doesn’t work? I’m confused unless there is some new workflow for these version 5 fonts?

Many thanks,

Did something happen to the custom fonts?

it works easier than that.

  1. upload all the fonts in the project settings - light, regular and solid
  2. refresh the designer
  3. select a text element / span and give it a class
  4. change the font of that class to “font awesome” or whatever you’ve named the the font you just uploaded)
  5. copy the glyph of the font icon you want from https://fontawesome.com/icons?d=gallery -
  6. click the (i) info button at the top right to “show cheatsheet”. then click the clipboard symbol next to the icon you want to “Copy Glyph”.
  7. Paste the glyph wherever it needs to go!

that’s it.


thanks @Diarmuid_Sexton :+1: . you typed this while I was making a quick vid:

I’ll ask our education team if we can make a university video of this process.

Font awesome use

Thanks everyone. Awesome as usual!


Thanks @Diarmuid_Sexton, @Nelson, that helped. And yeah a video on this would be great.


I really wish there was a way to just use their native classes with an tag. Much easier than having to copy paste glyphs from their site.

Ie… put class in of fa , fa-heart.
Since Webflow prefixes all classes with a w-, it seems this prevents that type of use.

Their cdn package is much better, and again, I think most of us probably are used to their class names than the glyphs…

And now with 5.0 there’s a lottttt more to do with their power classes.


THANK YOU! That did help. I had to go to a differnt spot to copy the gliph. Here’s a screenshot.


Thanks Nelson. I was messing up at not uploading all type of font files. I was only uploading either .ott or .eot


I just folowed your instructions… uploaded the files… created a class “fa-icon”… copied the icon and inserted it into a textfield… but still just see a square :frowning:

here is my link: https://preview.webflow.com/preview/wellenkraft?utm_source=wellenkraft&preview=47ede50b2129a559918d02622d2911a4 (see page styleguide)



The same to me. It doesn’t work. I copied the glyph to a text block, choose the Fa 400 font, but it doesn’t display the icon. It’s still a glyph. Any sollution finally? Thanks.



I would double check that the font you’ve uploaded is the right one. On mine it says fontawesome webfont and I installed all the variants just in case (prob overkill)

This post shows another way to use it by putting code into the header of each page.