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

So why don’t you use <i> tag for your edit button? Try this:

<button type="submit" name="edit" class="edit-button btn btn-primary">
   <i class="icon icon-edit icon-white"></i>
   Edit
</button>