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