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

SP Page Builder (Pro) 3.x

Updated Last: 16 June 2021

Icons (FontAwesome 5)

Icons

Icons have a very fundamental role in web projects, they add visual meaning to website elements. Since SP Page Builder Pro 3.6  update we replated the old Font Awesome 4.7 with the new Font Awesome 5.15.x Free collection. The users of the current version of SP Page Builder have Font Awesome 5 set by default.

In general, you have over 1600+ icons to choose from. New font icons include also new icons related to COVID-19, the much-awaited TikTok icon. Per a request by Adobe, the adobe brand icon was removed. All 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. 

FA 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 the 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.