Do you want to spice up your WordPress navigation menu with some cool custom icons?
What if I tell you that you could do that for free, without a plugin and it is not that difficult too!
What are we going to do?
In this post, we will download a few icons to add to our navigation menu. We will upload these icons to the WordPress Media Library and finally, we will use the icons for our WordPress menu links with a few lines of CSS.
No plugins?
I know a popular and easy way to add custom icons to your WordPress menu is to install the Better FontAwesome plugin.
This is a great way to do this, but… sometimes the icon you are looking for is not available in the Font Awesome library, or you just found a really cool icon online that you are eager to show off on your website, but just don’t know how.
If you follow along with this step-by-step guide, you won’t have a problem to add your own icons.
Before we get started
For this tutorial you will need a child theme. The easiest way to create a child theme is with a plugin, like Child Theme Generator. After you are finished creating your child theme, you can directly delete this plugin.
Find the Icons
With all the resources available online for free icons, this step won’t be a problem.
Some great resources for free icons are Flaticon, Freepik and Icons8.
This time I will use Flaticon. Go to flaticon.com and search the icon you want.
For a good user-experience, choose an icon that represents the link, so don’t get too crazy, or you might confuse your visitors.
Choose a small size, that fits your menu’s font size. The size of my icon is 32px.
Download the icons and save them. You might want to keep the filename short and simple for further use.
Upload the custom icons to wordpress
In your WordPress Dashboard, hover on the left sidebar over Media and choose Add New.
Browse to your files to upload them or drag and drop them on the rectangle.
Now the icons are accessible in WordPress.
On the right side, you see the file URL ( i.e. http://example.com/wp-content/uploads/2021/04/house.png )
Copy and paste the link in Notepad for an example, because we will use this later to point to the file in CSS.
Add a CSS Class to the menu links
Now we need to add a class to the menu links, which we want to add a custom icon to.
On the left side in your WordPress Dashboard, choose Appearance -> Menus. All the way on the top on the right side the is a button that says Screen Options. Click it and check the checkbox CSS Classes.
This will enable the option to add a CSS Class.
Open your menu below, click on a link, for me that is “Home” and you see a field where you can add a CSS class. My .png file is called house.png and I want to use it for the Home link, so I add the class house. Save the menu.
Add the CSS
This is the most difficult part, the CSS. I try to keep it as simple as possible, that is why for this example we will execute everything step from within the WordPress Dashboard.
On the left sidebar, choose Appearance and then Theme Editor. In styles.css we will add CSS to the menu class. In the example I use the class house.
This code will add an icon on the left side of the menu link. Here an example for my house.png and menu class house.
background-image: url() Paste in the URL to that you copied earlier from the Media Library.
background-size This will determine the size of your icon. Keep it below the actual size to keep your icon sharp.
background-repeat This will display the icon only once.
background-position “Left” will place the icon on the left side of the menu link.
padding-left Creates a margin between the icon and the menu link. Play with it for the right results.
Repeat the steps above for the other links until all menu links have a custom icon.
Finito!
And there you have it, your own unique WordPress menu with your hand-picked custom icons!
I hope you have fun following along this tutorial and your menu looks smashing!
Please comment below for any questions and stay tuned for more upcoming tutorials.