Tutorial on Font Awesome

Community resources Webflow Tips
1

Now that webflow has added capability of uploading fonts, can any post a tutorial on how to use font awesome here.

5 Likes
2

Using Font Awesome with Webflow.

  1. Download the Font Awesome Icon Set.

  2. Extract the fonts folder to your desktop or chosen destination.

  3. Login to Webflow and click on the site you want to edit

  4. Go to the site settings (the house icon on the top left)

  5. Click the fonts option

  6. Upload the fonts under the “Add Custom Fonts” area and add them.

  7. Go to the Cheatsheet section of the fontawesome website. I do a ctrl+f to find the name of the font faster.

  8. Find the font that you want and make sure to highlight the icon. The right-click and copy the icon.

  9. Go back to webflow.

  10. If you have a div box or text box etc, select it and give it a class under the style option at the top (the paintbrush). Type what you want under “current selector”.

  11. Scroll down to “Typography” and set the font family to the FontAwesome font that you uploaded previously.

  12. Paste your icon into the element (div, textbox, etc).

Viola!

Now, as mentioned previously, the FA set is pretty big and most likely you will not use all of the icons included in the set. I prefer Icomoon.com since it provides a way of selecting individual icons to use in your own custom set. I am not sure how to implement the other icon sets they have here, but use only the font awesome set unless someone else can chime in on the others.

Using ICO Moon

Go here

  1. On the top left, you will see 3 lines, click it and go to Icon Library
  2. Add the font awesome library. From there you will see what icons are available.
  3. Choose only the ones you want to include in your set.
  4. At the bottom, click the “font” button.
  5. All of your glyphs will show. Download and repeat steps 4-12

Hope this helps!

24 Likes
3

Still struggling with what looks easy. Followed these instructions and looked at others.

Looking at the code, the span is there with a weird symbol in between.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique .

Any ideas?

5 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus
    id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique <span class="fontello"></span>.</p>
6

Hi Kirk, do you have a public link to your site that you can share? (You can enable your public project link from the site settings page in Webflow). That way we can take a look how you have that setup in the designer…

I think maybe you are using the wrong unicode or wrong code there in your span.

7

Most of the time, you will get odd characters like that because the custom font is not selected in the typeface area. Whatever is selected by default has no idea what to do.

So try this:

  1. If the paragraph area has a class already, put the special character in a span.
  2. Give it a new class name then scroll to the typography section and select the custom font that you uploaded.
  3. That character should turn into the icon that you copied and pasted from the fontawesome cheatsheet.
2 Likes
8

Hi,@DRE
Thanks a lot cos it is exactly what I was looking for !

Kind Regards,
Alex.

1 Like
9

YES!!! YES!!! thanks …

you can do this for a custom font, its work.

1 Like
10

Hmm, tried this with a text element, but could not get it to work. I had initially uploaded the .ttf version of the Fontawesome Flaticons. I then uploaded the .otf version, and voila, it worked, so this could be something to try if you have problems.

1 Like
11

Thanks, really useful hint, but I can’t get why the embed icon looks like italic font ( Screenshot by Lightshot

12

I am getting the same issue - font/icon is displaying in italics

13

Just changed the “” to

Google default code is “keyboard_backspace” which is causing it to be displayed as italics

14

Which font file should we upload to the Webflow custom fonts area?

15

@pi_ron You can upload the .ttf or .otf file and your good to go

16

Perfect, just what I needed! Many thanks :slight_smile:

1 Like
17

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.