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