Client had a specific request to replace text from the WordPress navigation menu with an icon. For eg., Instead of having Home as a text, replace it with a Home icon as shown below:
Adding icons to the menu provides the visitors a visual clue about the content and also it would be a nice design touch to the website.
How to Replace WordPress Text Menus with Icons
Solution: First of all if you don’t know about font-awesome, then click here to check it out. It’s really cool to use such great icons in your website without much work. You need to add a CSS file from font-awesome to your website, for which you can do either through plugin or by adding a small piece of code. Here I’ll show you by adding a small piece of code.
Copy the below code and paste it into your WordPress theme’s functions.php file. Below code uses WordPress hook (wp_enqueue_style) to add CSS file font-awesome.css to the website.
wp_enqueue_style( 'prefix-font-awesome', 'https://use.fontawesome.com/releases/v5.0.6/css/all.css', array(), '5.0.6' );
Now that you have en-queued the font-awesome CSS file, you can display the icon by using a "i" tag with the class "fa" and the name of the icon you want to use (as explained on font-awesome official web page) as shown below: For e.g., add a home icon using the below code.
<i class="fa fa-home fa-lg"></i>
Replace Icons in the WordPress navigation menu
So, now as per my client’s request, I need to replace the text Home with the Home icon on the menu, which is shown above. Also you need to see that rest of my menu is unchanged!
To achieve this, simply go to Appearance > Menus, select the menu and replace the text under Navigation Label with the icon code as shown below:
That’s it. Now you will see the icon instead of text in the navigation menu.
