[Step by Step] Add WordPress Menu Icons to WordPress (2019)

Add navigation icons/WordPress menu icons to your WordPress website using this easy and step by step tutorial, both manually and by using a plugin.

WordPress menu icons can instantly leave a great impression to your audience. Who doesn’t like a visually attractive website? Since 2003, WordPress is behind some of the best and outstanding websites. WordPress has won the hearts of developers, businesses, and also leading news agencies. That is why news agencies like Reuters, BBC, and other big brands have been using WordPress. Also, numerous success stories are using WordPress as an eCommerce store or as a marketplace. You can add WordPress menu icon to make your website even more elegant.

You can beautify your website by adding WordPress menu icons beside each of the navigation menus. Adding nav menu icons can always be a good idea to increase user engagement to your site. Menu images for WordPress increase visual appeal of a website, For example, look at the picture below. Doesn’t it look nicer on the eyes because of the navigation icons?

nav menu images
A menu with navigation icons
nav menu without icons
A menu without navigation icons

Now, look at the second image. It seems pale compared to the first one.

Why Should You Add Nav Menu Icons/Nav Menu Images?

A picture says a thousand words.

As the saying goes, you can add pictures to increase user engagement to your website. There are also some more reasons to consider.

  • Make your website more beautiful to look at
  • Many people expect to see WordPress menu icons
  • Provides a good initial impression
  • Can express the navigation menu items more playfully.
  • Users can have a clear idea about site navigation on the first glance after seeing WordPress menu icons.

How to Add Nav Menu Icons/ WordPress Menu Icons?

Adding navigation menu can be hard or comfortable at the same time. You can add navigation menu icons without using a plugin and by using plugins. We will describe both ways, and you can choose whatever you like. However, we recommend using plugins to add nav menu icons to your WordPress website.

Add FontAwesome Icons to Navigation Menu in WordPress (Without Plugins)

It is a truth that icons beside the navigation menu look visually more appealing. Visual icons beside each navigation menu element make the website looks premium and increases the confidence factor massively of users. If you are using a free theme, you might not have the built-in option to add WordPress menu icons. However, you can add menu images to navigation with ease.

Add icons without plugins

There is a font library named Font Awesome where all the different types of icons are available to use for free. All you need to do is adding the CSS classes after loading Font Awesome library. Appropriate WordPress menu icons will show up beside the navigation menu options.

Step 1: Loading FontAwesome Library

There are many plugins to do it, but as we are writing this section without using plugins, we will have to edit functions.php theme file of  WordPress. (NOT RECOMMENDED). Editing functions.php can harm your website if you are not careful. This process is only for advanced users who know what they are doing.

 

  1. Go to Appearance >> Editor
    WordPress menu icon
  2. Open functions.php

WordPress menu icons - nav icons WordPress

  • Add the following code to your functions.php after <?phptag
    function wmpudev_enqueue_icon_stylesheet() {
        wp_register_style( 'fontawesome', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css' );
        wp_enqueue_style( 'fontawesome');
    }
    add_action( 'wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet' );
    ?>

    Like this
    WordPress menu icons

What the code does, that it loads FontAwesome’s font library to your WordPress website. Now you can use any icons of FontAwesome to your WordPress navigation menu.

Step 2: Adding FontAwesome Icons to Navigation Menus

We have loaded FontAwesome icon library to our website. Now we can use any icons from 4000+ icon collection of FontAwesome. Here’s the cheat sheet link of FontAwesome where you can find the exact codes you need for each of the icons.

For Gallery: fa fa-lg fa-camera-retro
For News: fa fa-lg fa-newspaper-o
For Home: fa fa-lg fa-home
For Contact: fa fa-lg fa-envelope-o
For About: fa fa-lg fa-info-circle

Where fa stands for the main class, fa-lg stands for large icons. If you want to use, the home icon add fa fa-lg fa- prefix and then use the icon name as found on the cheat sheet page.

  1. Navigate to Appearance >>Menus and open up Screen Options from the top. Check CSS Classes.

2. Open the Navigation Menu item where you want to add icons. Add the FontAwesome icon code.

  • You will be able to see your icons beside your navigation menu like this nav menu images

[You may see your icon alignment wrong because of your theme’s CSS. If you do not know how to fix CSS, please follow the later part of the post where we used plugins to add icons.]

Add Menu Icons/Navigation Icons in WordPress using Plugins

Adding manually seemed a little bit boring, right? You can simply make use of plugins to add these icons with ease. If we were you. We would add icons to WordPress menus using a plugin.

Plugin Recommendation: Menu Icons by Themeisle

Menu Icons by ThemeIsle

Why are We Choosing Menu Icons by Themeisle to Add WordPress Navigation Menu Icons?

Themeisle is a popular WordPress solution provider. There are themes are quite popular and maintain quality. Menu Icons by Themeisle is a quality plugin that does its job well and is an extremely well-built menu image WordPress plugin. The plugin can also add icons to dropdown navigation menu items. Now you can create WordPress dropdown menu with images easily.

  • The plugin does its job well.
  • Extremely easy to setup
  • Cleanly coded.

Step 1: Installing Menu Icons by Themeisle

If you still do not know how to install plugins, then follow our tutorial on plugin installation.

Just search the name Menu Icons by ThemeIsle and install the plugin and then activate it.

menu icons by themeisle

Step: 2 Showing WordPress Menu Icons in the Navigation Menu Bar

  1. First, go to Appearance >> Menus
  2. Secondly, choose the page that you want to show icons and open the menu item.
  3. You will find a new option naming “Icon: Select.” Click this option.

menu icons by themeisle - WordPress menu icon4. You will see a lot more icons here, and you can choose different settings for each icon. Simply pick your favorite icon and hit Save and you are done.

WordPress menu icon - menu icons themeisle  5. When you visit your website, you will be able to see the nav menu images just as you would have wanted.

nav menu images

Wrapping Up on WordPress Menu Icons

You can easily add WordPress menu icons using our process. There might be other plugins which offer the same facility. If you think we have missed a good plugin, please leave a comment and let us know.

It is also a good idea to add an author box below your content. If you are concerned about WordPress Security, do follow our WordPress Security Guide for in-depth security tips.

[2018] WordPress Security 101: The Definitive WordPress Security Guide

Follow us on Facebook and Twitter for more beginner friendly tutorials and reviews.

WordPress 5.0 Review: What’s New? Should You Upgrade or Wait?

WordPress 5.0 adds an entirely new editing experience. We are covering the full review as well as new feature coverage of Gutenberg.

Guys, it’s happening. Finally, WordPress 5.0 is live for everyone. You might be wondering “What’s new in WordPress 5?”. Well, there are a lot of new features.

WordPress 5.0 ‘Bebo’ Official tweet

WordPress is the most popular and most used website builder out there. WordPress is going through some major changes. Gutenberg is the future of WordPress, and it is releasing today on 6th of December 2018. it replaces the classic WordPress editor with a new block-based visual user interface. WordPress creator, Matt Mullenweg announced WordPress 5.0 plans back in October.

Continue reading “WordPress 5.0 Review: What’s New? Should You Upgrade or Wait?”

Easiest Way to Show Related Posts by Categories [2019]

Engaging your readers to your site is a tough task to do. WordPress Related posts (by category) can help you to hook your readers to more content.

Have you ever wondered when you are reading a blog, how a number of other articles appear with similar topic appear at the end of your article? You can add related posts by category in WordPress with some plugins which will help you to achieve the same task as other famous blogs.

What are related posts?

We already answered that related posts are those that appear below your current content. Most of the times these are related to the topic you are reading at the moment. Suppose you are reading a post about 10 amazing places you should visit before you go old. Below that articles, there may be articles on 7 haunted places you should see or places to visit in South Africa or how to pack your bag for traveling etc.

Continue reading “Easiest Way to Show Related Posts by Categories [2019]”

How to Fix WordPress Custom Post Type 404 Error [Updated 2019]

Fix custom post type 404 error easily with our beginner friendly and step by step tutorial.

Are you struggling with the custom post type error in your WordPress site? Sometimes a slight tweak could make your website inaccessible. But you know- WordPress is the most powerful CMS out there. You can easily find the solution to any problem in the WordPress community.

It can be frustrating to see the message ‘Error! 404 not found, while trying to access your custom post. In this short article, we are going to show you how to fix custom post type 404 errors in your WordPress site. Keep reading.

Continue reading “How to Fix WordPress Custom Post Type 404 Error [Updated 2019]”

Top 8 Best WordPress Caching Plugins Compared [2019]

In-depth review, performance and features comparison on the best WordPress Caching plugins available on the market [2019]

WordPress caching can be complicated if you do not know what you are doing. Trying to explain caching for different complex technologies might take a full chapter. However, you think of caching as a simple math problem. What’s five times 2? Anyone can immediately tell you the answer is 10. Why is that? Because at some point in life, one had to memorize the answer. This same thing happens to your WordPress website when you install a caching plugin. Your site “memorizes” some stuff to access those resources faster. This is how the caching works on a website.

Caching (pronounced “cashing”) is the process of storing data in a cache. A cache is a temporary storage area.

Wikipedia

Continue reading “Top 8 Best WordPress Caching Plugins Compared [2019]”

Why You Should Create a News Website in WordPress! [2018]

Learn how to create a news website in WordPress within minutes with our beginner friendly tutorial. (Bonus: 7 awesome WordPress newspaper theme recommendation at the end).

You will see hundreds and thousands of newspaper sites around you. But people are always eager to get real news and new thoughts. If you want to create a news website using WordPress, follow our step by step tutorial.

A good newspaper, I suppose, is a nation talking to itself.                                                                                                                                                                      Arthur Miller

Journalism is a great profession. Writing capability is also a divine gift. Today it’s easy to reach people with the news and views by just creating a news website. Treat the technological advancement as a reward.  Go ahead with your efforts and a creative team of writers.

Continue reading “Why You Should Create a News Website in WordPress! [2018]”

This is Why You Need to Start a Marketplace using WordPress [2018]

Start a multi-vendor or single vendor marketplace using WordPress within minutes using our step by step tutorial.

With the increased popularity of online marketplaces, WordPress increased opportunities to create a marketplace in the same platform. For all of you who didn’t know, that you can not only start a marketplace using WordPress, you can also create a multi-vendor marketplace using WordPress.

People who are in a comfortable place with WordPress find it hard to shift to another platform for any purpose. If you want to use WordPress to start a marketplace, you have come to the right place.

Continue reading “This is Why You Need to Start a Marketplace using WordPress [2018]”

3 Easy Ways You Can Consider to Create Anchor Links in WordPress

Create Anchor Links in WordPress can be tough if you do not get the concept right. Follow our step by step tutorial to know how to create anchor links in WordPress.

We use anchor links too frequently on our WordPress websites but get confused when someone asks about that. Anchor links can be considered as shortcuts within site. We are going to have a detailed discussion on anchor links and on how you can create anchor links in WordPress

Continue reading “3 Easy Ways You Can Consider to Create Anchor Links in WordPress”

How to Change Domain Nameservers [Step by Step]

Change your domain nameservers easily with this step by step beginner-friendly tutorial. Changing nameservers should not take more than a few minutes.

If you are running a self-hosted WordPress blog (not to be confused with WordPress.com), then you are using a domain and hosting to host your WordPress website. If you need to change your hosting provider, use CDN providers like Cloudflare then you have to change your domain nameserver

What is a Domain Nameserver?

According to Network Solutions

Domain Name Servers (DNS) are the Internet’s equivalent of a phone book. They maintain a directory of domain names and translate them to Internet Protocol (IP) addresses.

Continue reading “How to Change Domain Nameservers [Step by Step]”

What is Akismet and Why You Should Start Using it Right Away

Easily filter all of your spam comments and block them using the advanced algorithms used by the Akismet plugin.

Are you a victim of spam comments in your WordPress site? You can quickly filter all of your comments and block spam using the widely used Akismet plugin.

As of the most recently reported period, spam messages accounted for 56.87 percent of e-mail traffic worldwide.

Statista

We all have been victims of spamming at some points of our web journey. Fortunately, there are options today to filter this bad commercial advertising practice by just adding an anti-spam plugin in WordPress websites. Akismet is the best solution for you to have your job done.

What is the Akismet Plugin?

Akismet is the spam comments filtering service. Akismet plugin was developed and marketed by Automattic, the parent company behind WordPress.com.

Continue reading “What is Akismet and Why You Should Start Using it Right Away”