How to Add Image in Menu WordPress?
Among WordPress’s many benefits is its flexibility, which allows you to make changes as needed. Improving the aesthetic attractiveness of your menu structures, like by using icons, falls under this heading.
Adding icons to WordPress menus improves their aesthetics, readability, and recall. Customers of any language can understand your menu’s organization when you use the proper symbols.
You can either utilize a menu icon plugin or hardcode the icons into your WordPress theme. The first method requires familiarity with CSS, but it gives you more room to create the look you want. If you are hesitant about your coding talents, we suggest going with the second choice. Keep reading to find out about each strategy so you can pick the one that works best for you.
Method 1 – Insert CSS-Based Icon Menus
You can use custom CSS to add an icon style from a library to your WordPress site. You don’t have to make your own icons if you use one of the many available collections, such as Dashicons, Elusive Icons, Foundation Icons, or Font Awesome. The entire procedure will make use of the Font Awesome icon set. To add icons to your WordPress menu with CSS, follow these steps:
- Click the “Start for Free” button on Font Awesome’s main page.
- Simply provide your email address to receive a free Kit code that unlocks the whole collection of Font Awesome icons. The correct form of the library’s Kit code is as follows:
- Having obtained the library’s source code, you must now get the desired CSS class of Font Awesome icons. Visit Font Awesome’s search page to locate and download the perfect fonts.
- To open the Theme File Editor, navigate to Appearance in your WordPress admin menu.
- Kit code must be inserted into the header.php file, just above the headline. To update a file, select the appropriate menu option.
- To modify a menu’s appearance, click Appearance, Menus, and then expand the relevant menu item.
- In the Menu Structure page’s Navigational Label textbox, enter the CSS class you retrieved in Step 3. If you wish to display the current menu text next to the image icon, you should keep it.
- Click the Save Menu button after adding additional icons to other menu items in steps 3 and 6.
Method 2 – Utilize a Plugin to Implement Icon Menus
There is a plethora of plugins available to make adding beautiful icons to your menu bar a breeze. The following are some of our favorite menu icon add-ons:
Theme Isle’s Menu Icons is a free plugin that works with a variety of icon formats, such as Font Awesome, Dashicons, and SVG.
Menu Image
There’s a freemium add-on that can make your menu elements into clickable CTAs.
WP Menu Icons
Another free add-on that works with a wide variety of icons and allows for adjustments to things like size, color, and alignment.
Implementing Menu Icons by Theme Isle to Add Icons
- The WordPress plugin must be installed and activated.
- Expand a menu item and pick Appearance from Menus to alter its appearance. In the menu, “Icon” will appear.
- Next, click the Navigation Label input field.
- Click Select to utilize a Dashicon. To the right of the new icon, you can alter its transparency, positioning, vertical alignment, and font size. After that, select.
- Add the new icon to the Menu Structure tab. Click Save Menu after adding new items.
Conclusion
Menu icons improve WordPress site usability and appearance. It’s easy to make this update without WordPress experts. This tutorial showed you two ways to add WordPress menu icons: Manual coding is more flexible but requires CSS knowledge. Adding menu icons with a plugin is easier, but too many plugins will slow down your WordPress site.
