[Theme: ChaosTheory] Adding icons to the nav menu

Have you tried using #globalnav as ID? That is the ID of the navigation container.

So the structure is:

DIV #globalnav .menu-main-container
    UL #menu .menu
     LI
     LI

It does not work… I tried this code in the style sheet:

#globalnav .b-letter a, #globalnav .b-letter a:hover, #globalnav .b-letter a:focus,
#globalnav .subscribe a, #globalnav .subscribe a:hover, #globalnav .subscribe a:focus,
#globalnav .contrib a, #globalnav .contrib a:hover, #globalnav .contrib a:focus,
#globalnav .contact a, #globalnav .contact a:hover, #globalnav .contact a:focus,
#globalnav .disclaimer a, #globalnav .disclaimer a:hover, #globalnav .disclaimer a:focus
#globalnav .donate a, #globalnav .donate a:hover, #globalnav .donate a:focus {
background-repeat:no-repeat;
background-position:0.5em 0.5em;
color:#555;
padding:10px 0 0 60px;
width:70px;
}
#globalnav .b-letter a, #globalnav .b-letter a:hover, #globalnav .b-letter a:focus {
background-image:url('./images/sort_descending.png');
}
#globalnav .subscribe a, #globalnav .subscribe a:hover, #globalnav .subscribe a:focus {
background-image:url('./images/subscribe');
}
#globalnav .contrib a, #globalnav .contrib a:hover, #globalnav .contrib a:focus {
background-image:url('./images/plus.png');
}
#globalnav .contact a, #globalnav .contact a:hover, #globalnav .contact a:focus {
background-image:url('./images/contact.png');
}
#globalnav .disclaimer a, #globalnav .disclaimer a:hover, #globalnav .disclaimer a:focus {
background-image:url('./images/disclaimer.png');
}
#globalnav .donate a, #globalnav .donate a:hover, #globalnav .donate a:focus {
background-image:url('./images/donate.png');
}

Nothing shows up in the menu items, just the text like before.

Have you checked if the path to the image is correct?

You can use the Firebug extension for Firefox to do this, use the cursor to select a navigation item, then hover over the path of the file in the CSS section of the HTML inspector.

I’m positive the image paths are correct, I even tried placing in the full image path (with https://vengefulchip.tk/etc/etc/etc). It only pads the menu items, but does nothing more… =(

Hmm… are you sure?

Because if your stylesheet is in the directory chaostheory/ and the images are contained in the folder images that is placed in the folder, then the correct way to reference the images would be images/donate.png.

I used Firebug and with the following code I’m able to display the donate background:

#globalnav #menu .donate a {
    background: url('https://vengefulchip.tk/wp-content/themes/chaostheory/images/donate.png') no-repeat;
}

It’s safer to use the fullest relative URL with WordPress.
E.g

url('/wp-content/themes/chaostheory/etcetera...