How to Add Icons to Custom WordPress Menus Without Plugins

How to Add Icons to Custom WordPress Menus Without Plugins

Adding icons to your site’s navigation menu gives your visitors some visual clues about the content and also adds a nice design touch to your site.

In this post I’ll demonstrate how you can do this without using any plugins or uploading any images. Instead you’ll make some tweaks to your navigation menu via the WordPress admin and then add some code in your theme file.

When you’ve finished you’ll have some simple icons next to each item in your navigation menu, and the best part is that you won’t have to upload any images or files that could slow your site down. Here’s how the navigation menu will look once we’ve finished:

The navigation menu with fonts and font size corrected

We’ll use the Font Awesome icon library, which you could add via a plugin but you don’t need to as you can easily call it from your theme’s functions file.

Continue reading, or jump ahead using these links:

Adding Menu Icons – An Overview

These are the steps you’ll be taking if you follow along with this post:

  1. Create a child theme of the twenty fifteen theme to work on (you can skip this step if you’re working with your own theme).
  2. Activate the font awesome library from your theme’s functions file.
  3. Add CSS classes to the items in your navigation menu, via the WordPress admin.
  4. Add some styling to your theme’s stylesheet to get the layout and fonts right.

Let’s get started.

Creating a Child Theme of Twenty Fifteen

If you don’t already have a theme you’re working with, you’ll need to create one. The easiest way to do this is by creating a child theme of an existing theme, which means you can add your own changes without doing anything to the original theme. I’m going to create a child theme of the default theme, which is twenty fifteen.

If you’re new to child theme, check out our comprehensive guide that explains how to do it.

Activating Font Awesome

The next step is to activate the Font Awesome library in your theme. Before doing that, let’s take a quick look at Font Awesome:

Font Awesome - the iconic font and CSS toolkit. Website home page.

Font Awesome is a library of icons created using an icon font. This means it doesn’t use background images, as you might have done in the past when adding icons to your site. Instead it uses CSS classes, adding a pseudo-element to anything with an icon class. This pseudo-element adds a special character before the element, with the icon style. What you end up with is an icon being output immediately before the element you’ve added the CSS class to.

If you want to learn more about how Font Awesome uses CSS, take a look at the examples page on its website. You’ll also learn how to use classes to display icons as we work through this tutorial, which is probably the easiest way to get to grips with it.

So, let’s start by activating Font Awesome in our theme.

In your theme folder, create a new file called functions.php. If your theme already has a functions file, open that.

Add this code to your functions file:

Let’s take a look at what that does:

  1. It creates a function called wmpudev_enqueue_icon_stylesheet().
  2. Inside that function, it uses wp_register_style() to register the Font Awesome stylesheet, which is hosted outside your site. You can find this link on the Font Awesome site’s getting started page.
  3. Next it uses wp_enqueue_style() to enqueue the style it just registered.
  4. Finally, it hooks the function to the wp_enqueue_scripts action hook, which tells WordPress when to run the function.

Note that in the Font Awesome’s getting started page, you’re given instructions to call the stylesheet from the <head> section of your web pages (which would be in the header.php file of a WordPress theme. That isn’t the best way to register stylesheets in WordPress: the method above is the way you should do it.

Now save your functions.php file.

Adding Icons to the Menu Items

Now that we’ve got Font Awesome registered, we can use the CSS classes it provides to add icons to our menu items.

In the WordPress Admin, go to Appearance > Menus so that you can edit your navigation menu. If you haven’t already created a navigation menu, create one now and make sure you’ve ticked the checkbox in the menus screen so that it’s in the ‘Primary Navigation’ slot in your theme.

WordPress lets you add a CSS class to each item in your menu, but you can’t see the field for this by default: you need to switch it on first:

  1. At the top of the screen, click the Screen Options tab.
  2. Make sure the box next to ‘CSS Classes’ is checked.
  3. Close the Screen Options tab.

Now you can add a class to each of your menu items. Start with the ‘Home’ menu item. Next to the menu item, click on the downwards arrow to view more options relating to that menu item. In the ‘CSS Classes’ field, type the following:

This adds three classes to your menu item:

  • fa is used for all items with a Font Awesome icon
  • fa-lg sets the size of the icon to large
  • fa-home relates to the specific icon you want to display.

The admin interface for your menu will now look like this:

Menus Admin Screen with CSS Classes added

Now do the same for each of your menu items. You’ll find more icons and their classes on the Font Awesome icons page.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

I’m using the following classes:

  • Home: fa fa-lg fa-home (as above: a house icon)
  • News: fa fa-lg fa-newspaper-o (a newspaper icon)
  • Gallery: fa fa-lg fa-camera-retro (a camera icon)
  • About: fa fa-lg fa-info-circle (an info icon)
  • Contact: fa fa-lg fa-envelope-o (an envelope icon)

You can use whichever icons you want. Just make sure you add fa fa-lg and then the class for the icon to each navigation menu item in the ‘CSS Classes’ field.

Now save your menu by clicking the Save Menu button.

Styling the Menu Items

Now take a look at your site’s menu in the front end. Here’s mine:

Navigation menu with Icons added but no styling

That’s a bit of a mess! The fonts in my menu have changed, the icons are above the text when I want them to the left, and my menu items are next to each other when they should be one above the other.

If you’re working with your own theme, you may find that your menu looks better (or worse!) and you may need to make some different tweaks. To fix the problems in my site, I’m going to add some styling to my stylesheet.

Let’s start by making the menu items one above the other.

Open your theme’s stylesheet and add the following to it:

This will ensure that each menu item takes up 100% width of its containing element.

Note: If you’re working with your own theme you may need to target different classes or IDs for your menu depending on how your theme is coded. Use the web inspector in your browser to identify the classes to target.

 

Now when you refresh the screen the menu is looking a bit better:

Menu icons on home page - menu item width corrected to full width of container

The menu items are now in the right place but the icons should be to the left of each menu item instead of above it.

Fix this by adding the following to your stylesheet:

This uses the ::before pseudo-element that Font Awesome adds to each element you assign its classes to. In this case we’re making the contents of the pseudo-element float left, which means the icon will appear on the left of the menu text.

Now save your stylesheet and refresh your screen. The icons will be in the right place:

Menu icons floated left

The icons are in the right place now but they could do with tidying up. Let’s add some more styling for a margin and width. Edit the declaration for the pseudo-element that you just added to your stylesheet so it reads like this:

This adds a margin above the element to line it up with the text and also gives it a fixed width so that there will be a space between it and the text but the text will be aligned.

Now your menu will look like this:

Menu icons with the correct layout

That’s better. Now the final step is to adjust the font for the menu text.

Adding the Font Awesome classes to each menu item changed the font used for the text as well as the icons, so we need to change that back. I’m going to add styling for the link within each list item in the menu, as that won’t affect the icons, and I’ll use the font from the twenty twelve theme.

In your stylesheet, add this:

This targets the link in any menu item that’s been given the fa and fa-lg classes, and adjusts the font and font size.

Here’s what your final stylesheet will consist of:

Now the menu looks as it should do:

The navigation menu with fonts and font size corrected

Now my navigation menu is complete!

Summary

Adding icons to your site is a very different process from what it was a year or two ago. Now, instead of uploading images and using styling to place them in the background of elements in the page, you can add icons using a font-based icon library.

In this post you’ve learned how to use the Font Awesome library to add icons to your menu items and then style them so that they look tidy and the text font is as it should be. You can use this technique with other elements in your site, such as lists, callouts and buttons, simply by using the CSS classes provided by the Font Awesome library.

Do you use icons in your menus? Let us know in the comments below.

Tags:

Rachel McCollin Rachel is a freelance web designer and writer specializing in mobile and responsive WordPress development. She's the author of four WordPress books, including WordPress Pushing the Limits, published by Wiley.