How To Add WordPress Menu Icons – The Easy Way

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

  1. 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.

  2. Get Icon HTML Code

    Select the icon and copy the SVG Code in your clipboard.

  3. 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.

  4. Save Menu

    wordpress menu icon step 4 save menu 1

    Not the SVG Code is added, hit Save Menu without changing any other Settings.

  5. Add CSS Class

    WordPress Menu Icon - Step 5 Add Css Classes

    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.

  6. 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
YOU MIGHT ALSO LIKE:
Preload Key Requests in WordPress (i.e. Font Preloading)

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 👇

Leave a Comment

Send this to a friend