How to Create an Icon Menu in Aroxis

Aroxis has been integrated with the Entypo icon set to make adding icons to your site a breeze. Specifically, to create a better navigation menu. It only takes a few *simple* steps to make this:

Menu example

This is what we'll be making!

Step 1: Find the Icon You Like

The guys at Bistro Studios made a great list of all the Entypo icons, and how you can use them on your own website. Check out this visual guide to find the icon you want to use for your site.

Take note of the letters/numbers/symbols under each icon. For example, if I wanted to use this icon below, I’ll need to know the letter “G” (case sensitive):

Entypo

Step 2: Create Your WP Menu

WordPress has a great built-in menu system. To get there, login to your Dashboard and navigate to Appearance → Menus.

Just like any other theme, go ahead and create your nav menu. Add the page, categories or custom links you want to appear in your menu.

To make the icon show up, in the Navigation Label of your newly created menu item, you’ll need to set something like this up:

<span>LETTER</span> Item Title
nav-label

Be sure to wrap the <span> tag around the letter you found from the visual Entypo guide

Remember that letter or symbol you got from the visual guide in Step 1? You need to surround that with a <span> tag, just as it’s shown in the screenshot above to make it work.

Once you do this, that <span> tag will turn your letter into an icon, and you can go ahead to make beautiful icon based nav menus.

Comments on this entry are closed.