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.
This plugin provides vector icons, which means their size can be changed without losing quality. These icons are suitable for many different purposes, such as navigation menus, social media buttons, notification icons, and much more.
The plugin is easy to install and use. Once installed and activated, a set of icons is available for use in various formats such as SVG, fonts, CSS, etc. They can also be customized and used in different positions on web pages.
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 (https://fontawesome.com/). 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.
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.
Once you’ve copied the HTML code, go to the menu settings:
- In the left-hand menu, select “Appearance.“
- In the submenu, choose “Menus.”
- 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.
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.
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.
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.
