Trent Stromkins

<p>Enable Navigation Icons makes it simple to add and customize icons for your WordPress Navigation Block items. Whether you’re building a simple menu or complex mega menu navigation, this plugin provides intuitive controls for adding beautiful icons to your navigation links.</p>
<p><strong><a href="https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/bmx269/enable-navigation-icons/main/blueprint.json" rel="nofollow ugc">Try it in WordPress Playground</a></strong> — test the plugin instantly in your browser, no installation required.</p>
<p><strong>Recommended Companion Plugin:</strong> Use the <a href="https://wordpress.org/plugins/icon-block/" rel="ugc">Icon Block</a> plugin to add custom icon sets and expand your icon library options. Icon Block is a powerful companion that allows you to register additional icon libraries for use with Enable Navigation Icons.</p>
<h4>Key Features</h4>
<p><strong>Icon Selection</strong><br />
* Browse and select from a curated collection of WordPress icons<br />
* Upload and use custom SVG icons from your media library<br />
* Paste custom SVG code directly for complete flexibility</p>
<p><strong>Icon Positioning</strong><br />
* Position icons before or after navigation link text (left/right)<br />
* Space between justification for full-width layouts<br />
* Vertical alignment options (top, center, bottom) for multi-line menu items<br />
* Fine-tune icon position with vertical offset (supports px, %, em, rem units)</p>
<p><strong>Icon Styling</strong><br />
* Adjust icon dimensions with a slider control (supports px, em, rem units)<br />
* Control the gap between icon and text (supports px, em, rem units)<br />
* Choose from theme colors or set a custom color<br />
* Support for stroke-based icons with “No Fill” option (e.g., Lucide icons)</p>
<p><strong>Navigation Block Default Settings</strong><br />
Set default icon settings at the Navigation block level that apply to all child navigation items:<br />
* Configure size, spacing, color, position, vertical alignment, offset, and styling once for the entire navigation<br />
* Individual navigation items can inherit defaults or use custom settings<br />
* Works seamlessly with multiple and nested Navigation blocks<br />
* Applies to both inline navigation items and dynamically loaded WordPress menus</p>
<p>This feature streamlines icon management for large navigation menus by eliminating repetitive configuration while maintaining flexibility for individual items.</p>
<p><strong>Ollie Menu Designer Integration</strong><br />
Full support for the Ollie Menu Designer plugin’s mega menu dropdown items:<br />
* Add icons to Ollie mega menu dropdown navigation items<br />
* Same icon selection and styling options as standard navigation items<br />
* Works seamlessly with Ollie themes and the Menu Designer plugin</p>
<h4>Supported Blocks</h4>
<ul>
<li><code>core/navigation</code> – Navigation block (for setting default icon settings)</li>
<li><code>core/navigation-link</code> – Standard navigation links</li>
<li><code>core/navigation-submenu</code> – Submenu/dropdown navigation items</li>
<li><code>ollie/mega-menu</code> – Ollie Menu Designer dropdown menu items (requires Ollie Menu Designer plugin)</li>
</ul>
<h4>Credits</h4>
<p>This plugin was inspired by and incorporates code and ideas from the <a href="https://github.com/ndiego/enable-button-icons" rel="nofollow ugc">enable-button-icons</a> project. Special thanks to @ndiego for his excellent work on button icon functionality, which served as a foundation for implementing navigation icon features.</p>


Enable Navigation Icons

Easily add icons to Navigation Block items in WordPress.

Mickey Kay

MIGHTYminnow

Aaron [MIGHTYminnow]

<p><a href="https://travis-ci.com/MickeyKay/better-font-awesome" rel="nofollow ugc"></a></p>
<p><strong>Do you find this plugin helpful? Please consider <a href="https://wordpress.org/support/view/plugin-reviews/better-font-awesome" rel="ugc">leaving a 5-star review</a>.</strong></p>
<p>Better Font Awesome allows you to automatically integrate the latest available version of <a href="http://fontawesome.io/" rel="nofollow ugc">Font Awesome</a> into your WordPress project, along with accompanying CSS, shortcodes, and TinyMCE icon shortcode generator.</p>
<h4>Features</h4>
<ul>
<li>
<p><strong>Always up-to-date</strong> – automatically fetches the most recent available version of Font Awesome, meaning you no longer need to manually update the version included in your theme/plugin.</p>
</li>
<li>
<p><strong>Backwards compatible</strong> – shortcode output is automatically updated depending on which version of Font Awesome you choose, meaning that you can switch versions without having to modify your shortcodes.</p>
</li>
<li>
<p><strong>Compatible with other plugins</strong> – designed to work with shortcodes generated with plugins like <a href="https://wordpress.org/plugins/font-awesome/" title="Font Awesome Icons" rel="ugc">Font Awesome Icons</a>, <a href="https://wordpress.org/plugins/font-awesome-more-icons/" title="Font Awesome More Icons" rel="ugc">Font Awesome More Icons</a>, and <a href="https://wordpress.org/plugins/font-awesome-shortcodes/" rel="ugc">Font Awesome Shortcodes</a>, so you can switch to Better Font Awesome and your existing shortcodes will still work.</p>
</li>
<li>
<p><strong>CDN speeds</strong> – Font Awesome CSS is pulled from the super-fast and reliable <a href="http://www.jsdelivr.com/#!fontawesome" rel="nofollow ugc">jsDelivr CDN</a>.</p>
</li>
<li>
<p><strong>Shortcode generator</strong> – includes an easy-to-use TinyMCE dropdown shortcode generator.</p>
</li>
</ul>
<h4>Settings</h4>
<p>All settings can be adjusted via <strong>Settings → Better Font Awesome</strong>.</p>
<h4>Usage</h4>
<p>Better Font Awesome can be used in 3 different ways: shortcode, HTML, and TinyMCE</p>
<h4>1. Shortcode</h4>
<pre><code>[icon name="flag" class="2x spin border" unprefixed_class="my-custom-class"]
</code></pre>
<p>Note that prefixes (<code>fa-</code> and <code>icon-</code>) are not required, but if you do include them things will still work just fine! Better Font Awesome is smart enough to know what version of Font Awesome you’re using and correct of the appropriate prefix.</p>
<p>That means that all of the following shortcodes will work, regardless of what version of Font Awesome you choose:<br />
    [icon name=”flag” class=”2x spin border”]<br />
    [icon name=”icon-flag” class=”icon-2x icon-spin icon-border”]<br />
    [icon name=”fa-flag” class=”fa-2x fa-spin fa-border”]<br />
    [icon name=”icon-flag” class=”fa-2x spin icon-border”]</p>
<p>You can read more about shortcode usage on <a href="https://github.com/MickeyKay/better-font-awesome-library#shortcode" rel="nofollow ugc">Github</a></p>
<h4>2. TinyMCE</h4>
<p>Better Font Awesome also provides you with an easy-to-use drop down menu when editing in TinyMCE’s visual mode. Check out our <a href="https://wordpress.org/plugins/better-font-awesome/screenshots/" title="Screenshots" rel="ugc">Screenshots</a> to see what it looks like.</p>
<h4>3. HTML</h4>
<p>Note that prefixes are required for HTML usage, and are version-specific. For this reason, shortcode usage is encouraged over HTML. If you do want to use HTML, however, you can read more on the <a href="http://fortawesome.github.io/Font-Awesome/examples/" rel="nofollow ugc">Font Awesome site</a>.</p>
<h4>Advanced / Integration</h4>
<p>Better Font Awesome is built around the <a href="https://github.com/MickeyKay/better-font-awesome-library" rel="nofollow ugc">Better Font Awesome Library</a>. This library allows you to integrate Better Font Awesome into any custom project you want to create (perhaps a theme or plugin with a constantly up-to-date icon list), and includes all the <a href="https://github.com/MickeyKay/better-font-awesome-library#filters" rel="nofollow ugc">filters</a> you might need.</p>
<h4>Languages / Translations</h4>
<ul>
<li>English</li>
<li>French (thanks to <a href="http://www.pixemotion.fr" rel="nofollow ugc">David Tisserand</a>)</li>
</ul>
<h4>Credits</h4>
<p>Many thanks to the following plugins and their authors:</p>
<ul>
<li><a href="https://wordpress.org/plugins/font-awesome/" title="Font Awesome Icons" rel="ugc">Font Awesome Icons</a> by <a href="http://rachelbaker.me/" title="Rachel Baker" rel="nofollow ugc">Rachel Baker</a></li>
<li><a href="https://wordpress.org/plugins/font-awesome-more-icons/" title="Font Awesome More Icons" rel="ugc">Font Awesome More Icons</a> by <a href="http://webguysaz.com/" title="Web Guys" rel="nofollow ugc">Web Guys</a></li>
<li><a href="https://wordpress.org/plugins/font-awesome-shortcodes/" rel="ugc">Font Awesome Shortcodes</a> by <a href="https://profiles.wordpress.org/foolsrun/" title="FoolsRun" rel="nofollow ugc">FoolsRun</a></li>
<li>Dmitriy Akulov and the awesome folks at <a href="http://www.jsdelivr.com/" rel="nofollow ugc">jsDelivr</a></li>
</ul>
<p>And many thanks to the following folks who helped with testing and QA:</p>
<ul>
<li><a href="http://vanishingforests.org/" rel="nofollow ugc">Jeffrey Dubinksy</a></li>
<li><a href="https://twitter.com/_neilgee" rel="nofollow ugc">Neil Gee</a></li>
<li><a href="https://twitter.com/MichaelBeil" rel="nofollow ugc">Michael Beil</a></li>
<li><a href="https://twitter.com/rob_neu" rel="nofollow ugc">Rob Neue</a></li>
<li><a href="https://twitter.com/GaryJ" rel="nofollow ugc">Gary Jones</a></li>
<li><a href="https://twitter.com/JanHoekdotCom" rel="nofollow ugc">Jan Hoek</a></li>
</ul>


Better Font Awesome

1. It is not really compatible with font-awesome official plugin. I have this shortcode [icon name="fort-awesome" prefix="fab"] but not rendered correctly in this plugin.

2. There is only one version available while the screenshot showing version select box which make me understand that there are multiple versions to use. It is okay to use latest but just update screenshot please.

3. FAQ said there is checkbox Remove existing Font Awesome styles but there is not. The only remove I see is Attempt to remove Font Awesome CSS and shortcodes added by other plugins and themes which is very unclear that it will be mess up my post data or not.

4. They use only CDN, no local file option available. If I have to install a site in local network without internet access then this will be dead end. To be fair, this choice is not negative or positive but just my comment.

5. This plugin leave junk in my DB. The option name better-font-awesome_options still exists after uninstalled. The WordPress document is recommended to clean up the data on uninstall. Read more at Plugin Handbook / Plugin Basics / Uninstall Methods

Not compatible and SS/FAQ outdated

The Better Font Awesome plugin for WordPress. Shortcodes, HTML, TinyMCE, various Font Awesome versions, backwards compatibility, CDN speeds, and more.

Enable Navigation Icons vs Better Font Awesome