I have had some clients who asked about having icons in the navigation menus in OptimizePress, and after some research, I found a really neat service that is FREE that integrates with OptimizePress (and probably just about any other WordPress Theme).

In fact, if you look at the menu on this site you should be seeing these icons. Pretty neat right? Well the service is called “Font Awesome” and yeah, there is really no shortage of “Awesome” with these icons. There are literally tons of icons you can choose from. The great thing is, it literally only takes one line of code, and a bit of tweaking of your menus to get these added. Probably will take you no more than a few minutes to get this setup.

Update: Here is a video OptimizePress made about this.

Step 1: Grab the code

Go to the Font Awesome github “Get Started” page (opens in new window) and use the very first option there titled “EASIEST: BootstrapCDN by MaxCDN.” You’ll need to copy the one line of code there.

step1

Step 2: Add the code to the header of OptimizePress – for pages created with the page builder

Next, login to your WordPress Dashboard, and navigate to “OptimizePress > Dashboard > Analytics & Tracking” and paste that code you copied in step 1, into the Header Tracking & Analytics Codes box. This essentially adds the code to the header of your site as instructed. Click the green “Save Settings” button.

Step 3: Add the code to the header of the OptimizePress Blog/Standard pages

To have these icons show on blog pages and posts, as well as standard WP Pages (basically anything you create outside of the OptimizePress Page Builder), you’ll need to navigate to “OptimizePress > Blog Settings > Modules > Other Scripts” and select “header” from the drop down (if you already have some css or other code there, just click “add new” and you’ll be able to create a separate box there for the header codes. Paste the code from step one into this area and then click the green “Save Settings” button.

Congratulations, you have successfully integrated Font Awesome into your OptimizePress site. Now the fun part begins, but it is really easy.

Adding the Font Awesome Icons to your Navigation Menus

Now that you completed the first few steps, now you can choose any icons you want from the Font Awesome Icons page. Here is how to add an icon to a menu item (repeat this as often as needed to add an icon to each menu item).

1. Click on the icon you want, and you’ll see some code there. Then copy that code:

clickanyicon

 

copyiconcode

2. Go back to your WordPress Dashboard. Then go to “Appearance > Menus” and select the menu you have setup. Then click on the menu item you want to add the icon to. What you’ll need to do now is where you see the name of the menu item (Navigation Label), you’ll insert the code before the menu item name and then put a space between the code, and the item name – like this:

menu-item-edit

Once you do that don’t forget to click the “Save Menu” button. The icons should show up on your site as soon as you save the changes. Do keep in mind though if you have a caching plugin you may need to empty the site cache, and is probably always a good idea to clear your browser cache as well to rule out any possibility of your browser showing a cached copy of the page.

This is probably the easiest way I have seen for adding icons to menu items, and they look great to! Do you know of any other ways of doing this? Leave your comment below!

Update 7/16/2015: I must be blind!

Thanks to Twitter user @mcday for pointing out that my icons in the blog menu were in italics! Here is the code to fix this. Just add it under “OptimizePress > Blog Settings > Modules > Other Scripts” and put it in a “custom css” block:

[css]

/* fix italics on font awesome icons */
.blog em, .single-post em, .blog i, .single-post i {
font-style: normal!important;
}

[/css]


Kevin McClellan
Kevin McClellan

I love building sites with WordPress & OptimizePress. I have been creating websites since 1998 and been using WordPress since 2004.

When I’m not messing around with WP, I can be found watching Star Trek, Star Wars, or traveling to the beach whenever I want.