jquery icons not showing up?

Question

I'm following a tutorial on jquery icons here: http://view.jquerymobile.com/master/demos/icons/index.php

when I do stuff like data-icon="delete" or data-icon="check" the icons show up just fine, but when I do data-icon="ui-icon-caret-l" or data-icon="ui-icon-home"

my icon doesn't show up at all, why is this?

the button on the left is using ui-icon-caret-l and the one of the right is using check, how do I get icons like ui-icon-caret-l and ui-icon-home to show up?

Answer 1

Jquery automatically converts the value of the data-icon attribute to a ui class name.

For example, if you write this:

[code]<a href="#" data-icon="carat-l"></a>[/code]

When jquery is parsing the html page, then the above html is converted into this:

[code]<a href="#" style="ui-icon-carat-l"></a>[/code]

Answer 2

I figured it out, it seems like the icon names in the tutorial were simply incorrect, I tried carat-l instead of ui-icon-caret-l like the tutorial said and the icon showed up just fine.