How to Use Font Awesome Icons on Buttons

Marcin Zarycki
Form Developers
Basic form building

To add a Font Awesome icon to a button (added via the form builder), add a custom class to the button, and then add css in Custom Head Content (or in the bundle) to add the icon.

Button with the class added:

FAButton1

Example CSS:

FAButton2

  .insert-fa-save:before {
    font-family: 'FontAwesome';
    content: '\f0c7';
    margin-right: 5px;
  }
  
  .insert-fa-paper-plane-o:before {
    font-family: 'FontAwesome';
    content: '\f1d9';
    margin-right: 5px;
  }

The content value in the CSS is the unicode value (with a \ before it) of the icon, which can be found on the font awesome website.

FAButton3

This will all result in buttons that look like:

FAButton4