Icons (FontAwesome 5) | SP Page Builder (Pro) 3.x - Documentation | JoomShaper

SP Page Builder (Pro) 3.x

Updated Last: 20 November 2020

Icons (FontAwesome 5)

Icons

Icons have a very fundamental role in web projects, they add visual meaning to website elements. In SP Page Builder Pro 3.6+ Options you can choose icons from old Font Awesome 4.7 or new Font Awesome 5 Free collection. The current users of SP Page Builder 3.x need to configure Font Awesome 5 from the Global Configuration settings after updating. In the event of new installations, Font Awesome 5 will be configured by default.

In general, you have over 1500+ icons to choose from. Those icons are used in many addons, for example, Icon, Icon group, Feature Box.  Font Awesome gives you scalable vector font icons that can instantly be customized, for example, size, color, and anything that can be done with the CSS style. Those icons are vectors, which means they look perfect also on high-resolution displays.  All icons can be used also for private, commercial and government use. 

fa5 icons

The class names are changed. The fa prefix has been deprecated in Font Awesome 5. The new default is the fas solid style and the fab style for brands.


The icon is not available in FontAwesome 5

Since SP Page Builder 3.6.6+ we added support for Font Awesome 5 Free. Version 5 has been re-written and re-designed completely from scratch. Because of the FA developer decision, some icon names from FA4 collection were changed in FA5. In that case, you should edit addon(s) where you saw a warning message and replace the icon with a new one from the current list. Otherwise, you have to keep an older version of FA4.

How to solve common problems

If the icon(s) is not displayed, add the font-weight property for .fa class name. Not all font-weights are supported by Font Awesome 5 Free

But those below are supported by FA5 Free version.

.fa, .fab, .fas {font-weight: 400;}
.fa, .fab, .fas {font-weight: 900;}

fa5

We don't recommend using Font Awesome 4 and 5 side-by-side on a project. It will cause huge CSS and path collisions and we can't promise icons will render as you or we expect.