Getting Fontawesome 5 to work

Design help General
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 Icons | Font Awesome -
  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 Likes
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.

4 Likes
6

Thanks everyone. Awesome as usual!

7

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

1 Like
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.

1 Like
9

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

image
image1365Ă—663 53.1 KB

10

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

11

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: Webflow - wellenkraft (see page styleguide)

Nine

13

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.

http://test-a9c344.webflow.io/

14

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.

15

Has anyone fixed this? I bought a template that has FA working, I noticed that the FA 400 normal file in the template is 150kb ttf. The file downloaded from FA site is only 36kb. I have uploaded all the FA downloaded files to my new site that I can not get the icons to show up.

My view only link - https://preview.webflow.com/preview/rons-blank-site-3b8cf6?utm_medium=preview_link&utm_source=dashboard&utm_content=rons-blank-site-3b8cf6&preview=338715a82246bfb557288d79e483d0e0&mode=preview

The page I am playing with is called Test HTML page. Please if you answer this add a link to one that is working.

UPDATE - got this article Can't Get Font Awesome to Work and look at the answer that tells you to use the EMBED - it works.