Adding Font Awesome Icons in Smart Builder

Follow

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. You may see a pop-up appear, explaining that this app is swappable, like so:
    A pop-up on top of Smart Builder explaining that this App is swappable.
    See our documentation to learn more about swappable elements: Swapping Elements in Smart Builder.

Once you've installed the App, you can apply it to your landing page.

Adding a Font Awesome Icon to your Smart Builder Page

  1. Click on any element that you want to replace with an icon.
  2. Click the Change Element icon that appears at the bottom of the element.
  3. A drop-down menu will appear with different element options to swap with the existing one.
  4. Scroll down and select Font Awesome, from the Design Elements tab:
    Annotated image of an arrow pointing to 'Font Awesome' app in drop-down menu.
  5. A default apple icon will replace the existing element.
  6. Single-click the element, and select the Choose from Icon Library  button from the toolbar; the Font Awesome icon library will appear: 
    Gif demo of a user clicking the 'Choose from Icon Library' button; a new library window appears with differnet icons.
  7. Browse through the different categories, or search for an icon. 
  8. Single-click any icon to add it to your landing page:
    Gif demo of a user searching & clicking a dog 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 paintbrush icon to open the Icon Design Settings.
    Annoted screenshot of red arrow pointing to Paintbrush icon, on bottom of dog icon.
  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 realtime:
      Gif demo of a user changing the color of the icon to gold, and increasing the size to 50px.

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