Use FontAwesome Icons in WordPress Visual Editor without Disappearing

If you use FontAwesome icons in your work and use them inside WordPress visual editor and swap between text and visual mode – the icons get stripped out. Not good.

Disable Visual Editor

Couple of solutions to deal with this, one is to use a plugin called Disable Visual Editor which you can simply disable the visual mode on certain posts and pages.

disbale-visual-editor-wordpress

Turn off Visual Mode

This is fine if it’s your site and are in control but if you need a client to do edits and not worry about html it’s not so good.

WP Visual Icons

The second solution is to use a plugin that allows the usage of fontawesome icons in the visual editor, 2 good ones called WP Visual Icons  or Better Font Awesome

Install it and you’ll see an Icons drop down menu in the visual editor ready to add a multitude of icons to your page, not just FontAwesome icons but Genericons too.

icons-in-visual-editor-wordpress
This is great and the code used is the exactly the same as from FontAwesome with the same HTML mark up and CSS classes used. I believe their is a shortcode functionality to come in the next version.  icon-power-off

 

Leave a Comment





%d bloggers like this: