How to add FontAwesome icons in buttons

Jazz up your buttons with FontAwesome Icons

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:


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:


Did this page help you?