How to Add Icons to Custom Menus without Plugins in WordPress

How to Add Icons to Custom Menus without Plugins in WordPress

Adam Morgan

Creating icons on your site’s nav bar will make it more appealing to visitors and help them make their way around your site. We’re here to show you how you style your WordPress menus without using any plugins!

Making your Child Theme

This is the first step of creating your WordPress menus, if you already have this within the theme then you won’t need to bother. The simplest way is to make a child theme of an existing theme, allowing you to make changes without impacting the original. You can then activate Font Awesome within your theme, which gives you icons and fonts to choose from.

Within your theme folder, you can make a filed called functions.php or use the existing one. Then add this code:

<?php

function wmpudev_enqueue_icon_stylesheet() {

wp_register_style( ‘fontawesome’, ‘http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css’ );

wp_enqueue_style( ‘fontawesome’);

}

add_action( ‘wp_enqueue_scripts’, ‘wmpudev_enqueue_icon_stylesheet’ );

?>

view rawActivate Font Awesome hosted with ❤ by GitHub

So this code will create a function that uses the wp_register_style() to bring in the Font Awesome stylesheet and tells WordPress when to run it. Save this to continue.

Add your CSS to the Menu

Now that you have Font Awesome ready to go, use the CSS classes within it to add your icons. Go from WordPress Admin to Appearance and Menus. This allows you to add a CSS class to each of these items in your menu.

Check out the home menu as a starting point by clicking on the arrow to see more options. Use the CSS Classes field and enter:

fa fa-lg fa-home

view rawCSS for Home menu item hosted with ❤ by GitHub

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:

Follow this same process with all of your menu items. Then save your new menu.

Adding in Styling

Now go through to your live site and you’ll notice some changes on your menu. If you’re using a custom theme, this might not look great and you’ll have to style this further. Add to your CSS file to change the layout and size of the buttons to suit your styling. Inspect the elements to figure out which classes you need to target.

This can be a trial and error process, as you troubleshoot different elements. Taking the time to inspect and change each element can take a while and even become frustrating. Keep a cool head and work through all of them to create the perfect navigation WordPress menus for your users.

From there, you can work to change and improve them to better suit your target market. Knowing your audience is key to understanding what they look for in a site.

Adding icons and styling is definitely worth it for webmasters that want to make their site more appealing. Follow these steps and you’ll be done in no time.

Adam Morgan

Author Adam Morgan

More posts by Adam Morgan