free tuts

We may style WordPress navigation menu easily with CSS–to add background colour or link colour, set font-size, line-height, add border and so on and so forth. Usually we wrap default WP ul class “menu” in HTML5 tag nav (we give it id or class–depends on concrete theme needs) and add to theme file this code:

The HTML output executed by WordPress is this:

This is example of multiple items menu navigation with 1 level submenu.

What we style in styles.css is: nav#sometitle=>ul=>li=>a

WP code supplies each menu item (actually li HTML tag) with the id, as soon as menu item is added to navigation via Dashboard-Menus. In example above, li tag ids are “menu-item-123″, “menu-item-147″ and so on.

If we wish to add some individual style to each menu item, say icon, typically we would style the id, having prepared icon images beforehand (for desktops and retina dispalys accordingly):

In code above we styled an image icon both for desktops and retinas. To style li tag with icon we have to prepare a set of icon pngs (including @2x).

Simpler way, though, is to use icon font instead of images.

To do that we need to download some webfont kit and add it to corresponding folder in our theme Typically “fonts”). Next, we need to add font styles via font@face to styles.css what would look this way (we use here free Sosa icon font):

Next, we need to style “li” tag id with icon using pseudo-elements “before” or “after”–depends where we wish to locate icon–before menu item link or after. And last thing to do is to add styles to styles.css:

Sosa icon font uses for icons both uppercase and lowercase characters, therefore, it is important to style text-transform (if, say, your menu items anchors are defined as uppercase, naturally icons will inherit this style and you may get instead of desired pencil icon (a in lowercase) the undesired picture icon (A in uppercase).

Another way (besides font@face) to use icons is import link to stylesheet. For example, you prefer to use fontawesome icon font. You may simply add a link of into styles.css and import the font:

Another valuable resource is copypastecharachter which provides a lot of HTML entities which you may use instead of icon font. Example:

And here is live example of WP menu styled with HTML entities from copypastecharacter site:

Demo final code

Theme php file

Theme styles.css file

Theme output