align icons with text

Question

What's the best way to align icons (left) and text (right) or the opposite text on left and icon on right?

Does the icon image and text have to be the same size? Ideally I would like them to be different but be on the same vertical alignment.

I am using background-position css property to get the icons from a larger image.

Here is how I do it now, but I am struggling with either getting them to be on the same line or be vertically aligned to the bottom.

Text

This is what I get after I try your suggestions.

Though the text is now aligned with the icon, it is superimposed over the icon to the right of the icon that I want. Please note that i am using the background position to show the icon from a larger set of images.

Basically I am getting

<icon><10px><text_and_unwanted_icon_to_the_right_under_it>
<span class="group3_drops_icon group3_l_icon" style="">50</span>

group3_drops_icon {
background-position:-50px -111px;
}

.group3_l_icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/group3.png) no-repeat scroll left center;
height:35px;
overflow:hidden;
padding-left:55px;
}

Answer 1

You can do it on the same line using vertical-align and line-height

<p style='line-height: 30px'>
  <img src='icon.gif' style='vertical-align: middle' />Icon Text
</p>

Alternatively, you can go the background approach with no-repeat and positioning:

span.icontext {
  background: transparent url(icon.gif) no-repeat inherit left center;
  padding-left: 10px /* at least the width of the icon */
}

<span class="icontext">
  Icon Text
</span>

Answer 2

I usually use background:

<style type="text/css">
.icon {
background-image: url(path/to/my/icon.jpg);
background-position: left center;
background-repeat: no-repeat;

padding-left: 16px; /* Or size of icon + spacing */
}
</style>

<span class="icon">Some text here</span>