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

News Ever

 


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.




Post a Comment

  • Latest Biss Key + Frequency
    • NHL Service - 10762 V 28800 (7E) - Biss : 12 24 01 D3 11 4B 97 F3 
    • Varzish Sport HD - Yahsat 1A Satellite - Biss Key: 12 34 00 46 EB CD 00 78
    • Bein Sport - Eutelsat 16A Satellite - Biss Key: 12 24 01 D3 11 4B 97 F3
    • Discovery HD UK / Sky One HD - 12188 H 29500 8/9 - Astra 28E
    • Fox Sports Eredivisie 1 HD - 12073 H 30000 - Eutelsat 9E
      • BBC Earth - 11064 V 27500 - Eutelsat 25E
      • BBC Red Button HD 2/3/4/5/6 - 12421 H 27500 2/3 - Astra 28E
      • beIN SPORTS HD NEWS 12604 H 27500 2/3 Nilesat 7W
      Cookie Consent
      We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
      Oops!
      It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
      AdBlock Detected!
      We have detected that you are using adblocking plugin in your browser.
      The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
      Site is Blocked
      Sorry! This site is not available in your country.