Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

  • Home
  • macOS
  • WebDev
  • All Posts
  • Contact

Use FontAwesome Icons in WordPress Visual Editor without Disappearing

March 12, 2014 Leave a Comment

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, it’s called WP Visual Icons. 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

 

Cats: Theming, WordPress

Tags

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls

Donate a Beer to the Coolest Guides

Get Beaver Builder Now!

Copyright © 2023· Neil Gee - All Rights Reserved - Hosted by Runcloud

Copyright © 2023 · gee on Genesis Framework · WordPress · Log in