Joe Ponzio

STOP! Before using this older version of the plugin, check out <a href="https://wordpress.org/plugins/font-awesome-4-menus/" rel="ugc">the new Font Awesome 4 Menus for WordPress</a>!
Seriously… 
Seriously – we’re not supporting this anymore. If you’re starting fresh, use our new plugin (above). If you’re upgrading, make sure you make note of the differences between the old i class codes and the new ones. Any issues that were found in this plugin have been addressed in the new version, and we’ve added a ton of new functionality too!
<a href="https://wordpress.org/plugins/font-awesome-4-menus/" rel="ugc">Go to the new Font Awesome 4 Menus for WordPress</a>
Back to the old plugin notes…
Add Font Awesome icons to your WordPress menus without touching a single line of code! With this plugin, just add icon-(icon name) as a class to your menu and the plugin will put that icon into your menu before the text!
With Font Awesome Menus, you have access to the old Font Awesome 3.2 library throughout your site. With the included shortcode, you can also add icons to pages, posts, custom post types, widgets – anywhere you want them!
In your menus…
Want to add a home icon to the “home” link on your menu? Just add:
<pre><code>icon-home
</code></pre>
as a class in your menu and the icon will be inserted before the text.
In your posts/pages
Want that home icon to show up in a post or page or custom post type? Use the shortcode:
<pre><code>[icon name=icon-home]
</code></pre>
and voila!
In your theme
Because Font Awesome is available throughout your site, use it in other parts of your theme too! Want that home icon hardcoded into your footer? Here you go:
<pre><code>
</code></pre>
It’s all there, baby
You can also use any and all of the code options and styles on the Font Awesome website. See more examples at <a href="http://fontawesome.io/examples/" rel="nofollow ugc">http://fontawesome.io/examples/</a>

Font Awesome Menus

STOP! Before using this plugin, check out our new Font Awesome 4 Menus for WordPress!

Themeisle

WPShout

This plugin gives you the ability to add icons to your menu items, similar to the look of the latest dashboard menu.
<iframe loading="lazy" title="How To Add Menu Icons to your WordPress Site In Under 3 Minutes 🏠" width="750" height="422" src="https://www.youtube.com/embed/YcSotWXIczI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h4>Usage</h4>
<ol>
<li>After the plugin is activated, go to Appearance > Menus to edit your menus</li>
<li>Enable/Disable icon types in “Menu Icons Settings” meta box</li>
<li>Set default settings for current nav menu; these settings will be inherited by the newly added menu items</li>
<li>Select icon by clicking on the “Select icon” link</li>
<li>Save the menu</li>
</ol>
<h4>Supported icon types</h4>
<ul>
<li>Dashicons (WordPress core icons)</li>
<li><a href="http://shoestrap.org/downloads/elusive-icons-webfont/" rel="nofollow ugc">Elusive Icons</a> by <a href="http://shoestrap.org/blog/author/aristath/" rel="nofollow ugc">Aristeides Stathopoulos</a></li>
<li><a href="http://fontawesome.io/" rel="nofollow ugc">Font Awesome</a> by <a href="http://twitter.com/davegandy" rel="nofollow ugc">Dave Gandy</a></li>
<li><a href="http://zurb.com/playground/foundation-icon-fonts-3/" rel="nofollow ugc">Foundation Icons</a> by <a href="http://zurb.com/" rel="nofollow ugc">Zurb</a></li>
<li><a href="http://genericons.com/" rel="nofollow ugc">Genericons</a> by <a href="http://automattic.com/" rel="nofollow ugc">Automattic</a></li>
<li><a href="http://fontello.com/" rel="nofollow ugc">Fontello</a> icon packs</li>
<li><a href="http://themeisle.com/free-icons/" rel="nofollow ugc">TI Icons</a> icon pack by <a href="http://twitter.com/themeisle" rel="nofollow ugc">ThemeIsle</a></li>
<li>Image (attachments)</li>
<li>SVG (attachments)</li>
</ul>
<h4>Planned supported icon types</h4>
<ul>
<li>Image (URL)</li>
</ul>
<h4>Compatible themes</h4>
Menu icons works with most of the themes out there, especially with popular ones like Twenty Seventeen or <a href="https://themeisle.com/themes/hestia/" rel="nofollow ugc">Hestia</a>.
Development of this plugin is done on <a href="https://github.com/codeinwp/wp-menu-icons" rel="nofollow ugc">GitHub</a>. Pull requests welcome. Please see <a href="https://github.com/codeinwp/wp-menu-icons/issues" rel="nofollow ugc">issues reported</a> there before going to the plugin forum.
<h3>If you like this plugin, then consider checking out our other projects:</h3>
<a href="https://www.codeinwp.com/blog/" rel="nofollow ugc">CodeinWP Blog</a> – Designer’s Guide To WordPress 
<a href="https://revive.social" rel="nofollow ugc">Revive.Social</a> – Social Media Tools 
<a href="https://justfreethemes.com" rel="nofollow ugc">JustFreeThemes</a> – Free WordPress Themes directory

Menu Icons by ThemeIsle

Spice up your navigation menus with pretty icons, easily.

Font Awesome Menus vs Menu Icons by ThemeIsle