CODEWITHSUNDEEP
jquerycssjquery-ui
Johan
Johan

Reputation: 35194

Using jQuery UI icons as <li> backgrounds

I would like to replace the regular html list item dot with an image from the jQuery UI icon sheet:

CSS:

li { padding: 0 0 0 5px; }

HTML

<ul>
    <li class="ui-icon ui-icon-play">abc</li>
    <li>abc</li>
</ul>

I don't see my text when I add the image class. What did I miss here?

http://jsfiddle.net/KKhZg/509/

Upvotes: 1

Views: 1742

Answers (3)

agriboz
agriboz

Reputation: 4854

When you add class to li.ui-icon it is going to get the width of ui-icon which is defined 16px.

I updated your fiddle.

Upvotes: 3

Jose Rui Santos
Jose Rui Santos

Reputation: 15319

As seemly said, you can insert a nested element inside the li.

If you don't want to do that, just add these two rules to li:

li {
    text-indent: 16px !important;
    overflow: visible !important;
}

http://jsfiddle.net/KKhZg/512/

16px is the width of all jquery ui icons, so I guess you want your text indented after the icon.

I have put !important because it seems that on jsfiddle, the jqueryUI is loaded after the user css, otherwise the text-indent and overflow would get overriden by the .ui-icon

Upvotes: 2

seemly
seemly

Reputation: 1090

That will be due to the text-indent on that class name. You may need to insert a nested element (maybe a span), and apply the icon class on that element instead.

Upvotes: 1

Related Questions