Font Awesome is the internet's icon library and toolkit, used by millions of designers, developers, and content creators. You can choose from outlined, solid, and even well-known brand icons.
With the Font Awesome App, you can browse through hundreds of icons and add them to your page in just a couple of clicks. This article will explain install and add Font Awesome icons to Smart Builder.
Installing the Font Awesome App
- Navigate to the Apps
tab on the left-hand side of Smart Builder. - Search and locate the Font Awesome App.
- Click the plus
button next to Font Awesome to install the app. - The Font Awesome app will appear in the Add
tab in Smart Builder.
You can now drag and drop the Font Awesome app anywhere on your page.
To learn more about drag and drop, see this article: Using Drag and Drop in Smart Builder.
Adding a Font Awesome Icon to your Smart Builder Page
- Drag and drop the Font Awesome app onto your page:
- Click the Add an icon
button. - The Font Awesome icon library will appear; browse through the different categories, or search for an icon:
- Single-click any icon to add it to your landing page:
Customizing the Size and Colour of a Font Awesome Icon
- Single-click the new icon on your page, and click the brush icon to open the Icon Design Settings:
- Click on the Colour Swatch to open the colour settings.
- This is where you can try out different icon colour options by inputting a HEX code, an RBG code, or by making a selection on the colour wheel
- To change the size of the icon, enter a pixel or REM value into the Size input field and see it change in real time:
That's it! Be sure to Save and Publish your page for changes to take effect on your live page.