jQuery Forum

If you want it pushed down a tiny bit,  swap out your <span for a <sub.

Thanks!  That's better, though the icon is now slightly below the adjacent text when using inline-block on the <sub>.  Is there a good technical reason why neither margin-top nor padding-top styles affect the icon's positioning?  I guess I could always try the position API if I were desperate.  It just seems odd that this is not something people have complained about or tried to solve before.

Both <sub and <span are inline by default. So there is little you can do. I don’t think making them inline-block is a great idea.

Thanks, Jake.  I had used inline-block because that is what the examples on the jQuery UI theme roller page use, and most of the other examples I've seen online use.  See here for another instance:

The accepted answer says he doesn’t use jQuery icons anymore. You should probably do the same, unless you want to play with cross platform CSS behavior.

I found a workaround that seems to work no matter if you use a <sub> or a <span> for your jQuery UI icons that appear to the left of text.  Instead of selecting on "ui-icon", I am assuming that not all of your icons will have text with them, so you can mark those specific instances with an icon-with-text CSS class.

1.   var icon = $(".icon-with-text");
2.   icon.each(function() {
3.     $(this).position({
4.         my: "right middle",
5.         at: "left middle",
6.         of: $(this).next()
7.       });
8.   });