title: jQuery UI Icons trouble - how do I get just the image displayed
body: <p>Using jQuery UI icons I just want to display the icon in line with the rest ("just display the icon, no line breaks etc.). Basically I want to get a row of clickable images, while I am using <a href="http://www.devcurry.com/2010/08/style-html-table-using-jquery-ui-and.html" rel="nofollow noreferrer">jQuery UI themes for my page</a>.</p>
  
  <p>Here some things I have tried:</p>
  
  <pre><code>1: &lt;div style="display:inline-block;width:20px;height:20px" class="ui-icon ui-icon-trash"/&gt;
  2: &lt;input type="image" onclick=".." class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" /&gt;
  </code></pre>
  
  <p>1: completely messing up the layout.
  2: gives my an extra line break around the image </p>
  
  <p>-- as request wider context --</p>
  
  <pre><code> &lt;tr class="ui-widget-content"&gt;
     &lt;td&gt;...&lt;/td&gt;
     &lt;td&gt;
        &lt;input name="xy" id="xy" type="text" size="5" /&gt;
        &lt;input name="xz" id="xz" type="text" size="5" /&gt;
        &lt;input type="image" onclick="...;" class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p>-- span --</p>
  
  <p>Using <code>span</code> leads to the same as above, icon is displayed but in its own line.</p>
  
  <pre><code>  &lt;span class="ui-icon ui-icon-carat-1-n"&gt;&lt;/span&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/t5Dn5.png" alt="enter image description here"></p>