Miscellaneous

Font Awesome

Start using the loved Font Awesome icons with the Froala WYSIWYG Editor content.  

Inserting icons in your text has never been easier. With the Font Awesome plugin, you can now add any of the FA icons and add a twist to your content. You can also control the icons that you display by using the fontAwesomeSets option.


Edit in JSFiddle

HTML

<div id="froala-editor">
  <h3>Start using the loved Font Awesome icons with the Froala WYSIWYG Editor content. <i class="fa fa-star fr-deletable">&nbsp;</i></h3>
  <p>Inserting icons in your text has never been easier. With the Font Awesome plugin, you can now add any of the FA icons and add a twist to your content. You can also control the icons that you display by using the <code>fontAwesomeSets</code> option.</p>
</div>

CSS

<!-- Include Font Awesome CSS. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

JAVASCRIPT

<!-- Include Font Awesome plugin JS. -->
<script type="text/javascript" src="../js/third_party/font_awesome.min.js"></script>
<script>
  $(function() {
    $('div#froala-editor').froalaEditor({
      toolbarButtons: ['fontAwesome']
    })
  });
</script>