jQuery UI does this very well. You could look in to that. For example this is from the jQuery ui's theme file
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
Note the width & height in the ui-icon class and background-position attribute in the "positioning" section.
For example to use ui-icon-carat-1-n class the following could be done:
<span class="ui-icon ui-icon-carat-1-n" style="display:inline-block"></span>
Refer to this SO question which discusses about using jQuery UI icons:
http://stackoverflow.com/questions/7290857/using-jquery-ui-icons[
^]