How to Add Them to Your Navigation

Chưa được phân loại

If you’ve ever seen a website and wondered how they made menu icons, you’re in the right place. WordPress menu icons add a visual element to your site and incorporate relevant icons to further guide your users to the pages they need to go.

In short, a menu icon is a simple, non-invasive way to make your website look more professional, while subtly providing an extra nudge to your users by indicating exactly what they can expect when they click on a menu tab.

What’s more, is that adding WordPress menu icons only takes a few steps with the right plugin. There’s no need for you to custom code the menu design or worry about complicated settings.

Keep reading to learn about adding those WordPress menu icons and finding the perfect visuals for your industry and business.

📚 Table of contents:

To easily add WordPress menu icons, you can use the free Menu Icons by Themeisle plugin. It’s by far the easiest plugin to achieve the desired result, and you receive an impressive range of icon sets to choose from, including options from Font Awesome, Fontello, and Genericons.

Below, we’ll show you how to set up the plugin.

How to quickly add your first menu icon

We’ll get into more industry-specific icons further down in the article, but right now it’s time to add instant icons to a few tabs in your menu.

Note: We’re assuming that you already have a WordPress menu configured. If that’s not the case, go to this article (or this one for multi-level dropdown menus) to learn how to set up your WordPress menu.

The plugin documentation from Themeisle provides a quick guide on how to add menu icons if you’re interested. We’ll also cover it here in a bit more depth.

To start, go to the WordPress dashboard and click on Appearance → Menus.

menus

Assuming you already have a menu, you should be able to see the menu items under the Menu Structure header. With multiple menus, you’ll have to select the one you want to edit. There’s also a module on the left called Add Menu Items, which allows you to make menu tabs from pages, posts, custom links, and more.

look at menu

Find the right menu and add an icon

To add WordPress menu icons, select any of the menu items you already have created.

Locate the Icon: Select link. Click on that to navigate to the section to add an icon to that particular menu item.

select

By default, the Menu Icons by Themeisle plugin reveals icon options from the Dashicons collection. Feel free to scroll through the list and choose an icon that fits with the actual menu title.

For instance, the Customizer (pen/quill) icon would be relevant as a menu icon for a Blog.

dashicons

You can also search for icons by keyword or use the category filter to find different types of icons.

categories of WordPress menu icons

Click on the icon you’d like to use for the menu item. This highlights the icon and puts a checkmark next to it.

On the right side, you’ll see several settings to configure before activating the icon.

These include:

  • Hide Label – Removes the text label and only keeps the icon (great for social media icons).
  • Position – Shifts the icon’s location in relation to the text.
  • Vertical Align – Moves the icon’s vertical location.
  • Font Size – Enlarges or shrinks the icon’s size.
choose the WordPress menu icons

There’s a Preview area that provides an example of what the menu item looks like as you adjust the settings. For instance, increasing the font size and moving the icon’s position to “After” results in a new preview.

write blog icon

Make sure the icon you want is still highlighted, then click the Select button to add it to your menu.

select

Be sure to click Save Menu in order for the icons to activate.

If you want to change something, you can always select the Remove link to start over.

save menu

View the new icon on your frontend menu

Check to see if the icon actually shows up on your site.

Viewing the live website allows you to see if it looks presentable, or if there’s any need to adjust the icon settings any further.

blog

Troubleshooting

If you can’t see the icon or some of your menu items, make sure the Menu Settings are configured properly. The most important part is to have the Display Location assigned for that menu, like assigning it to the Primary Menu location.

menu settings

It’s also essential to check the Manage Locations tab in the Menus section, as you may find that the wrong menu is assigned to the Primary menu.

primary menu

How to activate all supported icon packs in the plugin

The Menu Icons by Themeisle plugin comes with support for the following icon packs:

  • Dashicons
  • Elusive
  • Font Awesome
  • Foundation
  • Genericons
  • Images
  • SVG

By default, the plugin settings only show Dashicons, but you can activate additional icon sets if desired. However, you should try to limit the number of icon sets you load because each additional icon set will have a small effect on your site’s performance.

To activate all, or some, of the icon types, go to Appearance → Menus in the dashboard.

Choose the Menu Icons Settings tab.

WordPress menu icons settings

Turn on all menu icon collections/sources

You’ll see various Icon Types under the Global tab:

icon types

Check the icon sets you want to add as options.

Click the Save Settings button to Continue.

check and save

Decide on a menu item for which you’d like to add a new icon.

Click the Select button for that item.

select button

Explore the icons from other sources

You should now see a list of several icon categories on the left side of the window.

Note: If you don’t see the new icon categories, try refreshing your page or saving your menu.

all category WordPress menu icons

Now, if you type “Shop” into the search field, you’ll see some different icons from each icon collection.

For instance, the Foundation collection provides two icons for that search, one that’s a shopping bag and another that’s a shopping cart.

Foundation WordPress menu icons

With the exact same search term, Font Awesome delivers three more icons, all a little different from the Foundation collection.

Font Awesome

Just like the tutorial from above, choose an icon and click Select to add it to your menu.

shopping cart

Remember to hit the Save Menu button.

preview and remove

Now the menu has both the Blog icon from before and the Shop icon, but this time from a different icon source.

frontend WordPress menu icons results

How to add image attachments and SVG attachments

The plugin also allows for SVG (vector) and image file uploads.

This means that you can make your own image or vector icon and upload it, or you may find a cool image icon from elsewhere online.

Again, go to Appearance → Menus, then click on the Select link for the menu item of your choice.

icon select

One thing that’s different about SVG and image files is that you typically need to make them the perfect size before uploading to WordPress; otherwise, the image may be far too big or small, throwing off the menu design.

To proceed, upload a very small image (this depends on your theme, but 50×50 px is a good starting point), highlight that image, and click Select.

add image

You should see the image icon show up on the backend of the menu.

WordPress menu icons image

And it appears alongside the previous icons, except as a far more unique image.

image on the frontend - WordPress menu icons

Start using WordPress menu icons today

The benefits are plentiful when it comes to WordPress menu icons.

Not only do they liven up your website, but they add an extra element of user-friendliness to the navigation.

Luckily, the Menu Icons by Themeisle plugin makes it easy to implement icons, images, and SVG icons, all with a few clicks.

For some other ways to enhance your WordPress menus, check out these guides:

If you have questions about WordPress menu icons, let us know in the comments.

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.