Question

I’m thinking this can be done with some sort of inline-block magic? maybe?

idk.. but basically, the text and the sprite should be inline.

right now, they are not: http://jsfiddle.net/DerNalia/qvZkK/2/

html:

<a href="" class="action_button" rel="facebox" style="">
    <span class="button_sprite_x"></span>
    Delete
</a>

Answer 1

Will your layout allow you to float it?

.action_button span.button_sprite_x,
.action_button span.button_sprite_plus,
.action_button span.button_sprite_duplicate,
.action_button span.button_sprite_star{
  width: 20px;
  height: 20px;
  display: block;
  float: left; /* Added float */
}

http://jsfiddle.net/qvZkK/3/

UPDATE:

Ah, but you probably want the sprite to be within the a element’s background. A combination of display: inline-block and float: left does that.

.action_button {
  display: inline-block; /* Add display: inline-block to .action_button */
}

.action_button span.button_sprite_x,
.action_button span.button_sprite_plus,
.action_button span.button_sprite_duplicate,
.action_button span.button_sprite_star{
  display: inline-block; /* And add display: inline-block here, also */
  float: left; /* Added float */
}

http://jsfiddle.net/qvZkK/4/