How to Add FontAwesome Icons to Buttons

To add a Font Awesome icon to a button via the Form Builder, add a custom class to the button, and then add CSS in Custom Head Content. You can also add the CSS at the bundle level.

Button with the class added:

Example CSS:

  .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.

This will all result in buttons that look like: