Display JQuery ui-icon inline with text

Question

I have the following in my html:

<div id="flash_message" class="ui-state-highlight ui-helper-hidden">
    <p>
        <span id="flash_message_content">Hey, Sailor!</span>
        <span id="flash_message_button" class="ui-icon ui-icon-circle-minus"></span>
    </p>
</div>

The classes are from JQuery UI. My goal is to display the message (in this case, "Hey, Sailor!") and then, immediately next to it, the circle-minus icon. I then bind a handler to the icon; that handler lets the user hide the message.

This all works fine, except that the span flash_message_button is displayed as a block. The icon appears on the next line from the message, not next to it. If I include an inline style command "display: inline" the icon disappears completely (it's still in the DOM, but is rendered 0px by 0px).

What change should I make to force the icon to display right next to the message?

Answer 1

Have you tried setting it to "display: inline-block;" ?

This will allow you to define both a width and height for your span flash_message_button and also let you display it inline.

I'm not sure whether this is exactly what you are looking for, but it certainly would be something that I would try given the problems that you were describing.

NOTE: display: inline-block; won't work in many versions of IE unless you have a correct DOCTYPE declaration.

Answer 2

I had this same issue and I just figured it out with the help of - jQuery UI - icon alignment

They key was to add float: left; (or right) to the element that you have given the class ui-icon.

Here's a JSFiddle with a Print button, and your example code with the float- http://jsfiddle.net/fgpjx5rc/

Example:

  <button>
    <span class="ui-icon ui-icon-print" style="float: left;"></span>
    Print
  </button>

My original issue -- I was trying to have the jQuery UI icon in a button next to a word of text. If I put the text before the icon, the icon was below the text. If I put the icon before the text, the text was below the icon. None of the other solutions here worked. I inspected with Firefox and disabled all the CSS and that didn't help. I also tried adding things there (everything suggested above). Even when I tested the same code with buttons from jQuery UI's website here, http://jqueryui.com/button/#icons, they didn't work. I Google searched for variations of text next to jquery ui icon and this was the first result. I also found this https://forum.jquery.com/topic/how-to-make-jquery-ui-icons-align-with-text, which referred to this How to use jQuery UI icons without buttons? and there the original asker gave up and just ended up referring directly to the image files.

Then I kept at it and found that first entry thankfully.