Image in CSS nav bar - css

Question

I'm trying to add an icon as the last link in my navigation bar.
It is adding too much space to the entire ul, even though the image does not extend a single pixel beyond the blue gear.
I've tried setting margins, padding, and line-height to 0, it still extends the block.
Nav Bar
nav bar
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-family: sans-serif;
}
li {
float: left;
}
li a {
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
HTML
<ul class="menu">
<li>PRODUCTION</li>
<li>OFFICE</li>
<li>SALES</li>
<li>MISC</li>
<li>ADMIN</li>
<li>GEAR</li>
<!--<li><a id="gear" href="#"><img src="gear.png"/></a></li> -->
</ul>
Image
Gear Image

Answer 1

You can easily add in this CSS rule, to make sure the image never goes larger than the text around it.
.menu img {
height:1em;
}
Without an accurate image file, I can't come up with a more specific/elegant solution:
Here's a working example:
http://codepen.io/anon/pen/LZRaWL
If the gear is too small, then reduce the padding and increase the size of the gear. Here's a secondary example in which I've taken advantage of the relative sizing for em units:
http://codepen.io/anon/pen/gMwEmj