![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/03\/final-navigation-menu-with-icons.png\"){kind=icon}
<\/div>\n<\/div>\n<\/div>\nWe’ll use the Font Awesome<\/a> 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.<\/p>\n Continue reading, or jump ahead using these links:<\/p>\n These are the steps you’ll be taking if you follow along with this post:<\/p>\n Let’s get started.<\/p>\n 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<\/a>.<\/p>\n If you’re new to child theme, check out our comprehensive guide<\/a>\u00a0that explains how to do it.<\/p>\n 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<\/a>:<\/p>\n 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\u00a0before the element, with the icon style. What you end up with is an icon being output immediately before the element\u00a0you’ve added\u00a0the CSS class to.<\/p>\n If you want to learn more about how Font Awesome uses CSS, take a look at the examples<\/a> page on its website. You’ll also learn how to use classes to display\u00a0icons as we work through this tutorial, which is probably the easiest way to get to grips with it.<\/p>\n So, let’s start by activating Font Awesome in our theme.<\/p>\n In your theme folder, create a new file called Add this code to your functions file:<\/p>\n\n
Adding Menu Icons \u2013 An Overview<\/h2>\n
\n
Creating a Child Theme of Twenty Fifteen<\/h3>\n
Activating Font Awesome<\/h2>\n
![\"Font](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/03\/font-awesome.png\")
<\/div>\n<\/div>\n<\/div>\nfunctions.php<\/code>. If your theme already has a functions file, open that.<\/p>\n
![\"Menus](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/03\/menu-screen-class-added.png\")
<\/div>\n<\/div>\n<\/div>\n![\"Navigation](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/03\/menu-icons-added-no-styling.png\"){kind=icon}
<\/div>\n<\/div>\n<\/div>\n![\"Menu](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/03\/menu-icons-added-width-styled.png\"){kind=icon}
<\/div>\n<\/div>\n<\/div>\n![\"Menu](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/03\/menu-icons-added-floats-styled.png\"){kind=icon}
<\/div>\n<\/div>\n<\/div>\n![\"Menu](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/03\/menu-icons-correct-layout.png\"){kind=icon}
<\/div>\n<\/div>\n<\/div>\n