Dispay icons and text on the same line

Dispay icons and text on the same line

I'm trying to get the text (Home, About Us, Cheese) etc to display to the
right of the social medias icons, so that they base of the text is aligned
with the base of the icons and they appear on the same line.
How do I do this?
My code is in fiddle here http://jsfiddle.net/pnX3d/
<div class="grid_5" id="social_icons">
<a href="http://www.facebook.com/print3dexpert"
target="blank"><img src="img/facebook.png" alt="Click to visit us
on Facebook"></a>
<a href="http://www.twitter.com/print3dexpert" target="blank"><img
src="img/twitter.png" alt="Click to visit us on Twitter"></a>
<a href="http://pinterest.com/print3dexpert" target="blank"><img
src="img/pinterest.png" alt="Click to visit us on
Pininterest"></a>
<a href="#"><img src="img/email.png" title="Click to contact us"
alt="Contact us"></a>
</div>
<nav class="topmenu omega">
<ul>
<li><a href="#">Home</a> |</li>
<li><a href="#">About Us</a> |</li>
<li><a href="#">Cheeses</a></li>
</ul>
</nav>