Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Miscellaneous

Font Awesome

Try it yourself:


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>
  new FroalaEditor('div#froala-editor', {
    toolbarButtons: ['fontAwesome']
  })
</script>