Insert Font-Awesome icons into WordPress editor

Live previewing content right in the WordPress editor is a cool feature that your themes should have. You can do it easily with add_editor_style function as I already covered in a previous post. This is the simple and easy way to improve user experience by letting users see how posts really look without page builder plugins.

However, what do you think if you can insert and preview Font-Awesome icons when you type? It would amaze your users! Here is an excellent sample from TheFour theme that I'm using for Deluxe Blog Tips (I'm very happy with it):

Fortunately, it's very simple to do that, just with add_editor_style as the following:

add_action( 'init', 'prefix_add_editor_styles' );
function prefix_add_editor_styles() {
    add_editor_style( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' );
}

Then in WordPress editor, switch to Text mode and insert icon's HTML code. That's easy.

Bonus tip:

If you want to use Google Fonts in WordPress editor, use the similar code:

add_action( 'init', 'prefix_add_editor_styles' );
function prefix_add_editor_styles() {
    add_editor_style( 'https://fonts.googleapis.com/css?family=Lato' );
}