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.
- You may see a pop-up that appears, explaining that you can swap an element on your page with this App:
To learn more about changing elements, see our documentation: Changing Elements on your Smart Builder Page.
Once you've installed the App, you can apply it to your landing page.
Adding a Font Awesome Icon to your Smart Builder Page
- Click on any element that you want to replace with an icon.
- Click the Change Element icon that appears at the bottom of the element.
- A drop-down menu will appear with different element options to swap with the existing one.
- Scroll down and select Font Awesome, from the Design Elements tab:
- A default apple icon will replace the existing element.
- Single-click the element, and select the Choose from Icon Library button from the toolbar; 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 pen 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 realtime:
That's it! Be sure to Save and Publish your page for changes to take effect on your live page.