Adding Font Awesome Icons in Smart Builder


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

  1. Navigate to the Apps tab on the left-hand side of Smart Builder.
  2. Search and locate the Font Awesome App.
  3. Click the plus button next to Font Awesome to install the app.
  4. 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

  1. Drag and drop the Font Awesome app onto your page:
    Dragging and dropping Font Awesome app into Smart Builder.
  2. Click the Add an icon button.
  3. The Font Awesome icon library will appear; browse through the different categories, or search for an icon:
    Search for an icon.
  4. Single-click any icon to add it to your landing page:
    Gif demo of a user searching and clicking an icon - the icon appears in Smart Builder.

Customizing the Size and Colour of a Font Awesome Icon

  1. Single-click the new icon on your page, and click the brush icon to open the Icon Design Settings:
    Font Awesome design settings.
  2. 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:
      Gif demo adjusting the icon designs.

That's it! Be sure to Save and Publish your page for changes to take effect on your live page.