How to Add Icons to your Menus

You’ve likely seen them on different websites and wondered how to add them to your won website. In this short guide we’ll show you how to add icons to your WordPress menu’s

Icons can serve many functions, such as saving space by displaying an easy to identify icon to conveying several words with a single image. Many menus will carry icons on them, from a home icon to a cart and even social media. What you may not know is that you don’t need a plugin or any special skills to add these icons to your menu.

1. Open the menu area on your website

This goes without saying. Head to your menu area by clicking on appearance >> menu and selecting the menu to work with. If you don’t have a menu yet, create one by following this guide

2. Add an item to the menu

You can add any item. It really doesn’t matter. It can be a page, post of custom link, just make sure that it’s linking where you want it to link

3. Open the item by clicking on it

By clicking on th eitem in the menu you will open the menu item options. This is where the magic happens

4. Delete the label name

This part is optional. If you want to retain the label name but add an icon to it you can also do that, but the label area is where you’ll be working

5. Pick an icon

What you may not know is that WordPress comes packed with inbuilt icons called Dashicons. While the variety is limited, it will see most people satisfied. To pick an icon from the list of Dashicons head to this link

6. Click copy HTML

When you click copy HTML you’ll see a dialogfue box open. Copy the HTML tag in there and head back to your menu page.

7. Paste into the label

The final step is to paste the HTML tag into the label. Don’t worry if the image doesn’t appear in the label editor. The icon will appear on the menu bar

8. Save

Once done save the menu and visit your website to see the new icon appear in your meu.

While the list of Dashicon icons is limited, it should satisfy more needs. If you need additional icons you can always use Fontawesome icons which also provide a HTML tag which will also work. The only additional step will be adding the Fontawesome CDN tag to the head of your website.

And that’s how you can ad icons to your website menu. Those who want to get a little more adventurous can also add images using the <img src> tag. This will place an image which is only limited by your imagination