20% Off All Froala Plans
Days
Hours
Minutes
Seconds
x

Froala Editor v4.3 is hereLEARN MORE

Pricing
Get Started
Skip to content
Star

Miscellaneous

Font Awesome

font-awesome

Try it yourself:

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>