How to replace menu links with an image

You are probably best off creating an image sprite of all the overflow images you want, then you simply add them as backgrounds to either the list item elements or the anchors in the meny with appropriate offsets. Unfortunately we cannot give you specific CSS as we have no idea what your images look like, but I can give you some clues:

In the backend, add a custom class to the image you want to replace, say “contact” for the contact menu, this will update the HTML that WordPress outputs to tag that li with a custom class called contact, you can then target that class with CSS as follows:

.contact {
text-indent: -999em;
background: transparent url('images/menu-sprite.png") 0 0 no-repeat;
}

The text-index bit hides the text out of the browser window – don’t use display:none as that breaks accessibility for some screen-readers, tempting as it is. Replace the URL bit with the path to your sprite, and fix the offsets to match the sprite location of your image in the sprite.