Froala Editor v4.2.0 is Here LEARN MORE
It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
Miscellaneous
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.
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"> </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>