Geek Answers Handbook

JQuery UI Problem Icons - How do I get only the displayed image

Using jQuery UI Icons I just want to display the icon according to the rest ("just show the icon, no line breaks, etc.). Basically, I want to get a row of clickable images while I use jQuery UI themes for my page .

Here are some things I've tried:

1: <div style="display:inline-block;width:20px;height:20px" class="ui-icon ui-icon-trash"/> 2: <input type="image" onclick=".." class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" />

1: completely ruin the layout. 2: gives my extra line break around the image

- as a request for a wider context -

  <tr class="ui-widget-content"> <td>...</td> <td> <input name="xy" id="xy" type="text" size="5" /> <input name="xz" id="xz" type="text" size="5" /> <input type="image" onclick="...;" class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" /> </td> </tr>

- span -

Using span leads to the same thing as above, the icon is displayed, but in its own line.

  <span class="ui-icon ui-icon-carat-1-n"></span>

enter image description here

+4
source share
2 answers

I think the key is to make display: inline-block icon containers.

 <div style="display: inline-block" class="ui-state-default"> <span class="ui-icon ui-icon-lightbulb"></span> </div>

See this example: http://jsfiddle.net/2U5TN/1/ .

In addition, you may find this page useful: http://jquery-ui.googlecode.com/svn/trunk/tests/static/icons.html . It displays all the possible icons you can use with jQuery UI CSS.

+9
source

Use the Example Toolbar on the jQuery website http://jqueryui.com/demos/button/#toolbar

Setting the text to false will display the icon:

 $( "#beginning" ).button({ text: false, icons: { primary: "ui-icon-seek-start" } });

It also shows that they use a text value to track the state of the button. Check the play / pause and stop buttons in the example.

+1
source

More articles:


All Articles