How to add an icon to your WordPress menu

Share Article

Sometimes you might want to add an icon to your main menu or top level navigation. A symbol or graphic instead of a written link. With WordPress, this is reasonably straightforward to action.

There are a few steps to go through to implement this without a plugin. I've outlined one route to use to add an icon to your WordPress menu. There are other methods, this one should be straightforward for a non-coder to action.

You will need access to your WordPress child theme. Either by FTP or using the inbuilt WordPress code editor (not recommended). Use a free code editor such as Brackets or Atom.

#1 Add Font Awesome

First, you need to add the icon. This is achieved without using an image. You can use an icon library such as Font Awesome. You need to add the free Font Awesome library to your WordPress website.

In your child themes functions.php file, add the following code.

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}
And save.

There is some guidance on the Font Awesome website if you require an alternate method.

#2 Find the icon you want to use

WordPress Training Newcastle

Font Awesome has a comprehensive library from which to select, you need to find the code associated with the icon you want to use, for example:

<i class="fas fa-atom"></i>

#3 Add CSS to your menu

Now you have the icon you want to use on your menu, head over to >> Appearance >> Menus and add a menu item

See the example screenshot below which is an icon on WP North East and link to our Facebook page.

#4 Extra styling if needed

The way this works can sometimes depend on the Theme you are using. Many themes have specific attributes that need to be taken into account so you may need to adjust the above. Study your theme and check for this type of compatibility.

#5 If you prefer a plugin

In my WordPress Training sessions, I always encourage the minimal use of plugins where possible. Adding a little code to your Child Theme can save uploading and managing yet another plugin.

If you really want to use a plugin to add an icon using Font Awesome, then here are your options.

Better Font Awesome
WP Font Awesome

The Takeaway

Adding icons to your menu can ehance your visitors experience, if you need help with any of the above or WordPress Training that helps you with the individual issues you are facing, then email me and we can chat about your needs.

FREE Guide. How to get started with your WordPress Website.

Your FREE PDF guide to get you up and running with your *WordPress website - fast!

Please enter your name.
Please enter a valid email address.
Something went wrong. Please check your entries and try again.
paperback-mockup-002 Cropped

*For self-hosted WordPress websites.

Belinda White | WP North East

Belinda White | WP North East

Belinda White, WordPress Training Consultant. WordPress Training, WordPress SEO Training - Creative Director at Arttia Creative Limited. Creative designer with over 20 years experience in the UK web and design profession.

More Posts - Twitter