WebFlow + Font Awesome

Yes, we can.

Why would we want this?

Font Awesome is a popular, comprehensive iconic font library which makes it possible to use icons in your website without the need for tiny PNG / GIF images.

As a font, you get huge advantages...

• A huge range of pre-made icons, in several variations
• Faster loading for your users, and faster rendering of your pages
• Size adjustments are easy, without distortion
• Color can be changed easily to match the branding of your site, without recreating all of the PNGs
• Hover-based color changes are also simpler than PNGs (no images, and no pre-loading)
• Special composition options

Let's look at an example

For example, in this client project, I wanted the footer icons to match the client's brand colors. Modifying each as PNGs would have been annoying, but Font Awesome made this easy.

How do we do this?

There are three distinct approaches to adding FontAwesome to WebFlow, which each have different pros and cons;

1. The Installed Font Approach
2. The CDN Approach, using CSS
3. The CDN Approach, using JS

The Install v. CDN approaches are outlined here in this excellent video by Terana Creative.

Pros and Cons

Depending on which of the 3 methods you choose, you will have different capabilities and limitations. Unfortunately, at the time I'm writing this, WebFlow does not support any form of tables within Rich Text elements.

See my Font Awesome comparison table here in Google Docs.

Working with the CDN Approach, using Javascript

Here we're going to install nothing, and instead use a Content Delivery Network (CDN) to deliver the .js and .css files we want.

SetUp

First, get your CDN link. These are coded individually for each user, and optimally each website you build, so you need to register (for free) in order to create a personal CDN link.

http://fontawesome.io‍

The embed code you are given will look something like this-

<script src="https://use.fontawesome.com/MY-EMBED-CODE.js"></script>

In WebFlow, go to your website custom code, and add it to your header.

Usage

Now, enter designer mode.

Any time you want to use an icon, create a Text block, Link bock item. It should have no content. Apply two classes- fa, and the name of the fa character you want it to render - e.g. fa-facebook.

Notes

Icon size appears to be controlled through class suffixes, and not through font size, line height, etc. This will likely change in the future SVG version.

‍

Future

At some point, we can hope that WebFlow will build Font Awesome support directly into the designer

Possibly create a desktop tool to make finding and locating font-awesome fonts easier, and copying e.g. the UNICODE value.

SVG icons, coming in FontAwesome 5

Alternatives

There are many alternatives to FontAwesome:

• Bootstrap
• Icomoon - allows you to create a font file that contains only specific selected glyphs. For performance and size, this is fantastic. In terms of icon range and consistency, you will likely need to do some hunting, and may need to buy "icon packs" to get the ones you want.
• Google?