How To Add Menu Button Icons Lumiere Template

Themeisle content is gratis. When you purchase through referral links on our site, we earn a commission. Acquire More

If you've ever seen a website and wondered how they made menu icons, you're in the correct place. WordPress menu icons add together 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 await when they click on a menu tab.

What's more, is that adding WordPress bill of fare icons merely takes a few steps with the right plugin. There's no need for you to custom code the menu blueprint or worry about complicated settings.

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

📚 Table of contents:

How to add WordPress menu icons to your navigation buttons
Configure the menu icon settings
Troubleshooting
How to actuate all supported icon packs in the plugin
How to add image attachments and SVG attachments

To easily add WordPress menu icons, you can utilise the free Carte du jour Icons by Themeisle plugin. It's by far the easiest plugin to reach the desired upshot, and you receive an impressive range of icon sets to cull from, including options from Font Awesome, Fontello, and Genericons.

Below, we'll show you how to gear up the plugin.

How to quickly add your first carte du jour icon

We'll go into more than industry-specific icons farther down in the article, but right now it'southward time to add together instant icons to a few tabs in your carte.

Notation: We're assuming that you already have a WordPress menu configured. If that's not the instance, go to this article (or this i for multi-level dropdown menus) to larn how to set your WordPress bill of fare.

The plugin documentation from Themeisle provides a quick guide on how to add together menu icons if you're interested. We'll too cover information technology here in a bit more depth.

To offset, go to the WordPress dashboard and click on Advent → Menus.

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

Find the right card and add together an icon

To add WordPress menu icons, select whatsoever of the carte du jour items you already have created.

Locate the Icon: Select link. Click on that to navigate to the department to add together an icon to that detail menu item.

Past default, the Menu Icons past Themeisle plugin reveals icon options from the Dashicons collection. Experience 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 exist relevant as a carte du jour icon for a Web log.

You tin besides search for icons by keyword or employ the category filter to find different types of icons.

Click on the icon yous'd like to utilise for the carte item. This highlights the icon and puts a checkmark next to it.

On the right side, y'all'll see several settings to configure before activating the icon.

These include:

Hibernate Label – Removes the text characterization and only keeps the icon (slap-up for social media icons).
Position – Shifts the icon'southward location in relation to the text.
Vertical Align – Moves the icon'due south vertical location.
Font Size – Enlarges or shrinks the icon's size.

There's a Preview area that provides an case of what the menu item looks like as you arrange the settings. For instance, increasing the font size and moving the icon'due south position to "After" results in a new preview.

Brand sure the icon you want is however highlighted, then click the Select button to add it to your bill of fare.

Be sure to click Relieve Menu in society for the icons to activate.

If you want to change something, y'all can always select the Remove link to showtime over.

View the new icon on your frontend menu

Check to see if the icon really shows upwardly on your site.

Viewing the live website allows you to run across if it looks presentable, or if in that location's any need to suit the icon settings any further.

Troubleshooting

If you can't see the icon or some of your menu items, brand sure the Menu Settings are configured properly. The most of import part is to have the Display Location assigned for that carte, like assigning information technology to the Primary Carte du jour location.

It's also essential to check the Manage Locations tab in the Menus section, as you may find that the wrong card is assigned to the Chief 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 evidence Dashicons, but you can actuate additional icon sets if desired. Even so, you should try to limit the number of icon sets you load because each boosted icon set up volition have a small-scale event on your site's performance.

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

Choose the Carte Icons Settings tab.

Plough on all menu icon collections/sources

You'll run into diverse Icon Types under the Global tab:

Check the icon sets y'all want to add every bit options.

Click the Relieve Settings push button to Proceed.

Decide on a bill of fare item for which y'all'd like to add a new icon.

Click the Select button for that particular.

Explore the icons from other sources

You should now meet a listing of several icon categories on the left side of the window.

Note: If you lot don't see the new icon categories, endeavor refreshing your page or saving your bill of fare.

Now, if you type "Store" into the search field, you'll come across some different icons from each icon collection.

For case, the Foundation collection provides two icons for that search, one that'south a shopping pocketbook and some other that'due south a shopping cart.

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

Just like the tutorial from in a higher place, choose an icon and click Select to add together information technology to your bill of fare.

Call up to striking the Salve Menu button.

Now the menu has both the Web log icon from before and the Shop icon, just this time from a different icon source.

How to add image attachments and SVG attachments

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

This means that you lot can make your own image or vector icon and upload it, or yous may discover a absurd image icon from elsewhere online.

Once again, get to Advent → Menus, then click on the Select link for the carte du jour item of your choice.

One thing that'southward different virtually SVG and epitome files is that you typically demand to brand 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×fifty px is a good starting point), highlight that prototype, and click Select.

Y'all should run across the image icon show upwards on the backend of the menu.

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

image on the frontend - WordPress menu icons

Start using WordPress bill of fare icons today

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

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

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

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

How to create a WordPress mega menu
Best menu plugins for WordPress
How to create custom menus in WordPress

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

Costless guide

5 Essential Tips to Speed Upwardly
Your WordPress Site

Reduce your loading time past even fifty-eighty%
merely by following simple tips.

Download costless guide