We have here glyphicons-halflings.png with all the icons:

Instead of showing the whole picure, we can show small parts of it:
(background-position: 0px 0px):
And we don't have to show it in the position: 0 0. We can move it to with the minus positions:
(background-position: -96px -144px): 
Interestingly: we can't use inline style for it. We use style:

[class^="icon-"],[class*=" icon-"] {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	line-height: 14px;
	vertical-align: text-top;
	background-image: url("../glyphicons-halflings.png");
	background-repeat: no-repeat;
}

So, all the classes begins with "icon-" or like " icon-" are matched. Than, for each individual picture we use
different background-position:

.icon-thumbs-up {
	background-position: -96px -144px;
}

The element is then: i class="icon-thumbs-up"