Streaming live at 10am (PST)

Getting Fontawesome 5 to work


#1

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,
John.


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


#2

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.


#3

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,
John.


#4

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.


#5

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

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


Font awesome use
#6

Thanks everyone. Awesome as usual!


#7

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


#8

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.