If you want to know how you can put any icons in your WordPress menu or header, don’t search any further. In this guide I’ll show you, how you can add your own WordPress Menu Icons without using PHP code, using a Plugin or Icon Font! All you need to do is adding some inline SVG HTML Code and maybe a little of CSS code. Let’s Begin!
Total Time: 15 minutes
-
Pick an Icon
Go to https://remixicon.com or any other Icon-Source of your Choice and pick the icon you want to add to your menu.
-
Get Icon HTML Code
Select the icon and copy the SVG Code in your clipboard.
-
Paste before Menu item Text
Open your WordPress Admin Area and go to Appearance -> Menu. Open your Navigation Menu and expand the Menu Item you want to add the Icon to and Paste the SVG Code in front of your Navigation Label.
-
Save Menu
Not the SVG Code is added, hit Save Menu without changing any other Settings.
-
Add CSS Class
Just in case we need to align the Menu items, we’ll now add a CSS Class for our Menu Icons, so we can select them later. Go to Screen Options (up right corner), Tick CSS Classes and add the CSS Class menu-icon to all your Menu Elements with Icon Code in it.
-
Align Menu Icons
Visit your Frontend. If your icons are not aligned correctly, open your customizer and add the custom CSS code below. Note that you may need to adjust the height, width and top values, depending on your theme and font-size:
.menu-icon svg {
height: 1em;
width: 1em;
top: .125em;
position: relative;
}
Tools:
- Browser
Conclusion
That’s it. You should now have your Menu Icons set without using a single WordPress Plugin or PHP Code. Of course, you can use this technique to add various Elements, such as Social Media Icons, a Search Icon or even a Blog Icon to your WordPress Website.
Also be advises, that you can use Remix Icons for a Commercial or non-Commercial Website, since they are open-srouce 😎
If you don’t like this way of adding your Icons to the WordPress Navigation or are not familiar with CSS classes, you could also check out the Plugin WP Menu Icons or Menu Icons by ThemeIsle. But I would suggest you to give my method a try 😉
We love 💚 Feedback, so if you have a questions left, any issues appeared or you just want to tell us about your favorite icon source, feel free to drop us a comment 👇
Thank you for your how to. Do you know a solution for a better backend feeling. I mean, that the backend shows also the icon and dont show the code.
have a nice day
Not really, sorry 😅
Thank you so much for this super easy and perfect working solution.
You’re welcome