How to add icons to any WordPress menu with the free menu icons plugin. Follow along with this video as we show you how you can easily add icons to your WordPress menu using a free plugin called menu icons plugin. You can download the menu icons plug-in from here, or install it directly from your WordPress plugins page. To install it directly from your plugin page, navigate to your WordPress dashboard and down to the plugins page. In the search box on the right-hand side, simply type ‘menu icons’. You should now see the menu icons plug-in pop up on the left-hand side of your plugins panel. When it appears click on the install now button. This is a very lightweight plug-in, so it will install very quickly and also not slow your site down as much as a large plugin would. When the plugin is installed the install now button will change to activate, stick on it once again to activate the plugin. Now that the plug-in is installed and activated, we can go to the menus and show you how easy it is to add icons the any WordPress menu.
Back at the dashboard go down to appearance, and then menus. If you have not done so, create a new menu for your site. We can now show you how to add icons to any WordPress menu with the free menu icons plugin. When you have completed adding the pages or posts to your menu, click on one of the page tabs to open it up. Just under the navigation label you will see a new entry that says icon. Click on this and it will open up a new page displaying the various icons that are included with this plugin. At the top of the page you will see a search box on the right hand side, you can enter your keyword in here to search for the type of icon that you are looking for, or you can simply scroll down and look through the list of the available icons. Although the list of icons is not huge, they have included some really useful ones, including some great social media icons. When you have selected your new icon, will be automatically return to the menus page. Repeat the process again as needed for the remaining menu items, all the items that you wish to add icons to. When you are happy with your iPhone selection click on the save menu button on the right hand side of the page to save your menu. Now visit the site and you should see your icons located in the positions that you chose earlier. That is pretty much it we have now added some icons to the menu.
To take this a step further we can now customize the icons if we wish, using some simple CSS code. For the example today I am using the Chrome browser, it includes the fantastic inspector tools. To activate the inspector right click on the element that you wish to inspect, in our case that is the icon that we have just added. Quality Inspector panel comes up we can go down to the appropriate CSS box for our icon and add some custom code. For this example the first thing that I would like to do is give it a background color. Now that we have a background color I’m going to change the color of the icon itself. To make it stand out a bit more I am going to give it a bit of padding to give it more space around the icon. Now we have more space I think I would like to make the background circular. What’s the icon is looking the way that you would like it to, we need to make these changes permanent. At the moment if we refresh the Chrome browser the code that we have written will disappear and the icons will revert to their previous state. To make this permanent we need to copy the CSS code that we have just written in the Chrome browser. Go back to the dashboard and down to the customizer. Most, if not all WordPress themes have a customizer, or at least an area where you can add custom CSS. Once added and published our changes will become permanent. So, that is how to add icons to any WordPress menu with the free menu icons plugin
For our readers, get any of the below courses for just $9.99 each. Just contact me with the course name and I’ll email you the discount coupon.
