Icons

Icons have a very fundamental role in web projects, they add visual meaning to website elements. 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. 

Note: With SP Page Builder 4.0, you can use your own custom icon pack too. Please refer to the Custom Icon section of the documentation to know more. 

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;}

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.