How to add icons to the main menu in WordPress

Last updated December 6th, 2023 05:52

You may have also seen a WordPress main menu created with icons placed before each menu item, just like the one I have here on my blog. Since I wanted to avoid using menu creation plugins and usually use Font Awesome as my icon plugin, today I’ll show you how to add icons to the main menu in WordPress. Simply and quickly.

What is the WordPress main menu?

The main menu in WordPress is an essential part of a website because it allows visitors to quickly find what they’re looking for. Typically located at the top of the page (called the website header) it contains links to the main categories of the website. These could be pages like “About Us”, “Contact”, or “Products and Services”.

To be able to edit the main menu, users need to have access to the WordPress administrative interface and appropriate permissions. Once in the administration panel, menu items can be easily added or removed from the main menu. The menu can be found under the Appearance category.

You can also create “sub-navigation” items. For example, in the “About Us” section, there may be a navigation structure for social media and sub-pages.

How to add icons to the main menu in WordPress

If you want to quickly and easily add icons to your menu, you can use the previously mentioned Font Awesome plugin. To install it, go to “Plugins” in the left menu and click on “Add New“. Then, search for the plugin by name and install and activate it.

Menu customization

Assuming you already have the menu structure set up and just need to add icons, now navigate to the Font Awesome plugin website ( Select “Icons” from the top menu, then choose “free and open-source icons“. The website will display the basic icons that are available for free. Use the search function to find an icon that suits your needs. For example, to add a home link, you can search for “home” or “house” icons.

How to add icons to the main menu in WordPress
How to add icons to the main menu in WordPress

Now for the “more complicated” part. After selecting the desired icon on the plugin website, you will be shown its HTML code. It looks like this:

					<i class="fa-solid fa-house"></i>

Make sure to copy this code to your clipboard as we will need it in the next step.

How to add icons to the main menu in WordPress

Once you’ve copied the HTML code, go to the menu settings:

  1. In the left-hand menu, select “Appearance.
  2. In the submenu, choose “Menus.”
  3. Select the menu where you want to add the icons.

Each menu item can be edited. If you want to place the icon in front of the link name, simply insert the HTML code you copied a moment ago before the name. The menu has the advantage of reflecting HTML tags and, thanks to the Font Awesome plugin, the inserted code will be converted into an icon.

Jak přidat ikony do hlavního menu WordPressu

How to add icons to the main menu in WordPress – conclusion

As you can see from the instructions, adding icons to the menu is really not that difficult. It’s just three simple steps. Install the plugin, copy the HTML code from the website, and insert it into the menu before the link description. That’s all there is to it. The advantage is that the menu doesn’t have to be cumbersome, but instead can be light and fast. Thanks to icons in SVG format, it is also very usable for mobile displays.

More content about WordPress

Whole category is here

The website is created with care for the included information. I strive to provide high-quality and useful content that helps or inspires others. If you are satisfied with my work and would like to support me, you can do so through simple options.

Byl pro Vás tento článek užitečný?

Klikni na počet hvězd pro hlasování.

Průměrné hodnocení. 0 / 5. Počet hlasování: 0

Zatím nehodnoceno! Buďte první

Jak užitečný vidíte tento článek.

Sledujte mě na sociálních médiích.

Je mi líto, že pro Vás nebyl článek užitečný.

Jak mohu vylepšit článek?

Řekněte mi, jak jej mohu zlepšit.


Subscribe to the Newsletter

Stay informed! Join our newsletter subscription and be the first to receive the latest information directly to your email inbox. Follow updates, exclusive events, and inspiring content, all delivered straight to your email.

Upozornit na
0 Komentáře/ů
Vložené zpětné vazby.
Zobrazit všechny komentáře.

Pokud mi chcete napsat rychlou zprávu, využije, prosím, níže uvedený
kontaktní formulář. Děkuji.

Další Kontaktní údaje