LOOKIN’ GOOD: How to add icons to your menu navigation

Notice anything new here?

Look up.  Up.

No, not at the ceiling… up above this text in the menu bar.

Checkout the menu entries for the Toolkit, Designs and Wp Triggers… see those icons?

font-awesome-icons-in-navigation-menu

[looks up… starts to salivate]

BOOM! Awesome sauce in tha house (actually.. it’s on the menu!)

Want some of that sauce?  This is how we do it…


NOTE: In the latest version of Dynamik Website Builder there is an easier option to integrate Font Awesome than what is documented below, it’s under Genesis > Dynamik Design > Body > Add Support For Font Awesome Icons.  If you have that option, check that box and skip down to Step 2.  Thanks to Linda and Olof for the tip.

Step 1: Integrate Font Awesome Icons Into Genesis / Dynamik Website Builder

In order to use all 519 Font Awesome icons, you need to copy and paste one tiny little line of code.  That line of code is this:

<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>

So COPY that line of code.

Now login to your WP site and go to Genesis > Theme Settings > Header and Footer Scripts and paste it in at the top.

Your screen should look like this:

Then SAVE your changes.

BBBUUUUTTTT one thing I should mention is that depending on when you are reading this (are you from the future?) you might want to go to this link and copy the EASIEST line of code… that way you’ll salways have the latest font awesome version.


Step 2: Pick your Font Awesome icon

Now, go scroll through this page and find the icon that you want to use, here are just some of the icons you can choose from

Once you’ve found “the one”, marry her, move to Florida and start a web design company.

Wait.

No.

We’re talking about icons here.

Once you’ve found “the one”, CLICK on the icon and you should be at a page that look like this:

Towards the BOTTOM of that page you should see some html that looks something like this:

<i class=”fa fa-paint-brush”></i>

Select that entire line and COPY it.

Almost done… promise.


Step 3: Add the Font Awesome icon code to your menu

Now that we’ve integrated the Font Awesome code, found an icon and copy the html for our perfect icon, now let’s get it into the navigation menu.

Go to Appearance > Menus and click the down arrow next to one of your menu entries, like this:

which will expand the menu options, now just paste that code BEFORE the menu entry label in the Navigation label, kinda like this:

Now save your menu and checkout out the menu on the front end of your website.

Repeat for your other menu entries.

Got it?

Easy, right?

So go forth brave web-warrior and make those navigation menus spiffy… or as Salt-N-Pepa says: Ah, push it… p-p-p-push it real good.

Your friends,
Ian & Amy

PS: Sorry for all the gangsta talk today… it’s Rap-Attack-Wednesdays in the lobby of the WDA corporate office (aka our living room) where we listen to old school rap music all day on Pandora.

Like this little gem from the one-hit-wonder Montell Jordan…

That’s such a great song!

Photo by Tony Alter