One of the benefits of having a WordPress website is that you are free to customize it according to your needs. This includes but is not limited to, enhancing the look of your navigation menu with image icons.
Adding icons to the WordPress navigation menu can make it more attractive, accessible, and easily recognizable. Menu icons also help communicate your menu structure to an international audience.
There are two ways to add icons to your WordPress website – by coding them manually or by using a menu icon plugin. The first method offers flexibility in achieving your ideal design but requires CSS knowledge. If you are unsure of your coding skills, we recommend using the second method.
Keep reading to understand how each method works so you can choose the one that best suits your needs.
This method involves adding an icon type from a library to your WordPress website using Custom CSS. Different types of icons are available, meaning you don’t have to design them from scratch, like Dashicons, Elusive Icons, Foundation Icons, and awesome fonts.
For this tutorial, we’ll be using the Font Awesome icon library. Here’s how to add WordPress menu icons using CSS:
- Go to the awesome font home page and select Start for free.
- Enter your email to get the free Kit code, which lets you grab Font Awesome icons from their library.
- Now that you have the library code, the next step is to get the CSS class of the Font Awesome icons you want to use. Go to Font Awesome’s search page and save the ones that suit your needs. For this example, we’ll use the “lodge” icon for our home page.
- Go to your WordPress admin dashboard and navigate to Appearance -> Theme file editor.
- Open the header.php file and add the kit code above the line. Click on Update file.
- Move towards Appearance -> menus and expand the menu item you want to customize. Add the CSS class you have in the third step to the Navigation label text box in the Menu Structure section. Keep the current menu text if you want to display it next to the image icon.
- Repeat the third and sixth steps to add more icons to other menu items, then click the save menu button.
- If the process is successful, your menu will look like this:
The steps to add WordPress menu icons vary depending on icon types. For example, you can use the Dashicons library without modifying the theme file because it’s the official WordPress admin font since version 3.8. Some libraries use CSS classes to implement image icons in WordPress menu items.
Many plugins simplify the process of customizing your navigation menu with beautiful menu icons. We recommend the following menu icon plugins:
- Menu Icons by ThemeIsle ‒ A free plugin that supports different types of icons including Font Awesome, Dashicons, and SVG.
- Menu picture ‒ A freemium plugin that can convert menu items into call-to-action buttons.
- WP menu icons ‒ Another free plugin that supports multiple icon types and provides various customization options including icon position and color.
The following tutorial will show you how to add icons using the Menu icons using ThemeIsland plugins:
- Install and activate the WordPress plugin.
- Go to Appearance -> menus and expand the menu items you want to customize. You will see a new menu item called Icon: Select under the Navigation label text zone.
- Click on Select and choose the Dashicons icon from the context menu. Customize the new icon’s visibility, position, vertical alignment, and font size through the menu icon settings on the right. When finished, press the Select button.
- The newly chosen icon should appear inside the Menu structure section. Repeat the same process for the other menu items, then click the save menu.
- Here is an example of a WordPress menu with the default Dashicons icon added using the plugin:
Conclusion
Adding menu icons to your WordPress website is a great way to improve its navigation and aesthetics. Editing is relatively easy, so anyone can do it without the help of WordPress experts.
Through this article, you have learned two methods to add menu icons to the WordPress navigation menu:
- Code it manually – This method gives you more flexibility but requires knowledge of CSS.
- Use the menu icon plugin – a more beginner-friendly method, but remember that using too many plugins can slow down your WordPress site.
Which method do you prefer? Let us know in the comments section below.
If you still have questions about how to add icons to your WordPress menu items, the following section might have the answers you’re looking for.
Yes, you can Upload an SVG file to WordPress. However, since WordPress doesn’t have built-in SVG support, you have to manually enable it using an SVG plugin or by editing the functions.php case. Whichever method you choose, limit SVG upload permissions and clean SVG files before uploading to reduce security risks.
Yes, there are tons of free and premium WordPress themes that come with icon fonts. Developers usually list this feature in the theme description, so look for them when looking for new themes in the marketplaces.
How to earn money from LinkedIn: Today we are going Read more
Self-marketing is one of the most important tasks you will Read more
Hi friends, today we will remove "Powered by Blogger" from Read more
