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;
The Installed Font Approach
The CDN Approach, using CSS
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.
In WebFlow, go to your website custom code, and add it to your header.
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.
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.
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
There are many alternatives to FontAwesome:
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.
Want to support our team?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.