Tutorial on Font Awesome

Community resources Webflow Tips
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