Add Icons to Navigation Menu - WordPress Tips, Tricks Every Serious Blogger Must Know

 


Add Icons to Navigation Menu - WordPress Tips, Tricks Every Serious Blogger Must Know

Add Icons to Navigation Menu


You can easily add icons to your navigation menu using the Menu Icons plugin developed by ThemeIsle. Simply install and activate the plugin and you will now be able to add custom icons to your menu items.


You can select from various icon type sources (#1). If you want to use your own custom icon images, you’ll want to enable the Image option. This will let you upload your own custom icons. Once you’ve activated your custom icon types, you can now add custom icons to your menu items (#2).

If you want to add icons to your navigation menu without using plugins, you can do so via your theme’s custom CSS.

First, you’ll need an icon, preferably 25px by 25px in dimension, then upload it to your website. We recommend creating a new folder called “icons” in your root WordPress installation and uploading all your custom icons there. You will then refer to your icons via ./icons/youriconname.png on your custom CSS code snippet.

Here’s an example custom CSS that you can add to your theme. This is tested working perfectly on the TwentyTwenty theme. You may have to adjust these to fit perfectly to whatever theme you’re using.

.homemenuicon a{
    padding-left: 30px;
    background-image: url(./icons/youriconname.png);
    background-position: left;
    background-repeat: no-repeat;
}

You can add custom CSS to any theme via Themes Customize Additional CSS. Once you’ve added the CSS for your menu icons, you need to apply it.

Go to Theme Menu and enable CSS Classes in screen options.


Next, add your custom class (in our example, .homemenuicon) to the CSS Classes field in the menu.


Save the menu and see your home menu item now sporting a custom icon beside it.

Below is what our example will look like in TwentyTwenty theme using a custom home icon of 25px by 25px in size.




Previous Post Next Post

 

Advertisement