Icon fonts allow you to add resolution-independent, multicolor icons to your web design projects. There are many icon fonts out there available for free, but Font Awesome is the name that dominates all.
Using Font Awesome is pretty simple. After adding all those FA assets to your project, you just have to use <i> or <span> HTML tags with the Font Awesome default (.fa or .icon) and icon classes to show up the icons.
With WordPress navigation menus, you don’t have the freedom to add markup to the menu items – as the whole menu is rendered by the PHP functions from the WordPress library. Here is how to add Font Awesome icons to your WordPress menus in a few steps.
WordPress plugin to add Font Awesome to menus
There exists a fine WordPress plugin that helps you to do that without messing up with or digging into the code. The plugin is called as Font Awesome Menus and it also allows you to add the icon fonts to your post pages with shortcodes.
After installing the plugin, all you need is to add class names to your WordPress menu items to show FA icons in them. For more details on plugin usage and FAQs, take a look at Font Awesome Menus plugin at the WordPress plugin repository.
FA in WordPress menus without plugin
If you know how to work with CSS, you can avoid using an extra plugin to add icon fonts to your menus. This involves little bit of CSS coding, you will need to edit the Font Awesome CSS file that you’re using in your WordPress theme.
In the CSS file, look for the following line:
.fa {
Replace it with:
.fa, .wp-icon a:before {
Its pretty sure that you don’t want all of the Font Awesome icons in your menus. Just select the ones you want in the menu, refer to Font Awesome icons page, note down the classes of your selected icons and again go the Font Awesome CSS file.
Lets say you’ve selected the search icon which has the class .fa-search. Now look for the below line of code in the CSS file:
.fa-search:before {
And replace it with:
.fa-search:before, .wp-icon.wp-fa-search a:before {
Note that you have to supply a different class name (in the place highlighted in the above code) to use in your WordPress menus to avoid any collision with the Font Awesome classes. The menu class name could be anything, but I suggest you to make it as meaningful as possible – prefixing the FA class with wp (eg. .wp-fa-search) would be a good idea.
You should follow the same procedure for the other icon classes. Save the changes.
Now in your WordPress dashboard, go to the Menus in the Appearance, edit the desired menu and start add the classes as shown in the below screenshot.
Save the menu after adding the classes and notice the changes. Further, you may tweak the CSS to make the menu look perfect on your theme’s design.
That’s it! Feel free to post your suggestions, thoughts and questions on that.
