How to Add Icons to your Navigation using Font Awesome!

Oh my Lawd! It is February. Is it just me or did January seem to last forever? 

Anywho...Let's make your site or blog pretty! Today I am sharing a tutorial on "How to add icons to your Navigation or Menu using Font  Awesome." This tutorial is for Wordpress users. I do advise that you check out the icons that are available on Font Awesome.

After following this tutorial, we hope your site will look something like this... let's get started!

Step 1

Insert this code into your Theme Functions. This will add the Font Awesome Font to your theme.

//* Load Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
    wp_enqueue_style( 'font-awesome', '//' );

Step 2

Now insert this code to your stylesheet. This will add the font, spacing, padding, for your menu icons.

/* Menu Icons ----------- */
.menu-primary li a:before {
    font-family: FontAwesome;
    padding-right: 7px; /* change the padding to fit your needs */


Choose your icons. Visit Font Awesome and choose which icons you would like to be on your navigation menu. Then copy and paste the "Unicodes" of the icons you would like to use and save it somewhere for later use.

Step 4

Find your Menu-Item ID.  To find your menu-item ID, right click on your menu item and click on "Inspect Element". (click on the images to see a larger view)


The ID for Home is "menu-item-84". Write or copy your men-item ID for later use

Step 5

Now we will add the icon to our menu. Remember that Unicode and Menu-Item ID I told you to copy?  When you are done replacing the items, copy the below code into your stylesheet. (Remember to replace my unicode and menu-item ID with yours.)

/* Home menu item */
#menu-item-84 a:before { /* add in your menu item number */
    content: "\f015"; /* add the unicode from Font Awesome here */

Click "Save" and refresh your website to see if your icon shows up. 

Step 6

Repeat steps 3 though 5 to add more icons to your navigation or menu. Then VOILA! Your site could look like this! 


There is more...

If you would like to change the color of the icons or make it bigger, try this code: 

.menu-primary li a:before {
font-family: FontAwesome;
padding-right: 7px;
color: #ef55b3; /* Change the color */
font-size: 20px; /* Change the font size */

Well I hope I helped make your website or blog pretty! 

Happy Monday! 

xo, Rekita Nicole