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

0 0 vote
Article Rating
Spread the love
Written by: John Cook

Written by: John Cook

Author

About: I'm John Cook. I'm a qualified data scientist, currently undertaking a Masters of data science at RMIT University and a Masters of information technology at CSU in Australia, a blogger, developer and WooCommerce fanboy. As the founder of Swift Designs, WC Success Academy, Wiz Plugins, Commerce Mania and Learn WP by Swift Designs, my goal is to empower website owners around the world to take full control of their WordPress powered websites. I've been developing websites for close to 10 years and have a deep understanding of WordPress and how it works. As an active plugin developer with several plugins in the WordPress plugin repository, this gives me a unique understanding of the inner workings of WordPress. My goal with Learn WP is to allow WordPress website owners the ability to discover the true potential WordPress has to offer in an uncomplicated and easy to understand way
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments