Using Twitter Bootstrap glyphicons in CSS

Question

I would like to add a Twitter bootstrap glyphicon to replace the image reference in the CSS file below though not sure how.

.edit-button {   background: url('../img/edit.png') no-repeat;   width: 16px;   height: 16px; } 

In HTML I would add it as follows:

<i class="icon-search icon-white"></i> 

Any ideas?

update - tried the following though it only shows width and height in Firefox's firebug:

.edit-button {   /* background: url('../img/edit.png') no-repeat; */   background: url(../img/glyphicons-halflings.png) no repeat -96px -72px !important;   width: 16px;   height: 16px; } 

not sure why it's not being picked up ?

Answer 1

I like using the :after or :before method...

HTML

<a href="http://glyphicons.com/" class="arrow">Click Here</a></div> 

CSS

.arrow:after {   font-family: "Glyphicons Halflings";   content: "\e080"; } 

This should work assuming you have the glyphicon fonts (they come free with Bootstrap)