10

As you can see here: http://jsfiddle.net/kralco626/3BYDu/

The icon does not show up when you use display:inline

How do I get around this?

Improve this question

3 Answers 3

Reset to default
11

Useui-icon, before of the ui-icon-ICON and use the CSS display:inline-block should work properly

<span class="ui-icon ui-icon-home" style="display: inline-block"/>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

5 
<table>
    <thead>
        <th>
            <div style="float:left">My Header</div>
            <div style="float:left" class="ui-icon ui-icon-triangle-1-n"></div>
        </th>
    </thead>
</table>

Edit for formatting.

Improve this answer

Comments

4

Well, I guess you could try inline-block instead of inline.

Improve this answer

4 Comments

it shows, but under the text. I think the ui-icon class gives it inline-block
Ah, browser wars. In my Firefox, inline-block renders the icon next to the text. In my Internet Explorer, it doesn't. Best go with Vinnyq12's answer
lol, ya and I was testing with chrome :) can't we all just agree on one browser?
IE7 doesn't do inline-block, and IE8 will only do inline-block if using a proper doctype. You can fake it by googling up the styling for goog-inline-block, but it's easiest to just float.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.