Использование щелевых глифов-щелевиков в CSS

Я хотел бы добавить глиф-код загрузки для Twitter, чтобы заменить ссылку на изображение в файле CSS ниже, хотя не уверен, как это сделать.

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

В HTML я бы добавил его следующим образом:

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

Любые идеи?

update - попробовал следующее, хотя в Firefox 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;
}

не уверен, почему его не подхватили?

Ответ 1

Итак, почему вы не используете тег <i> для своей кнопки ? Попробуйте следующее:

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

Ответ 2

Мне нравится использовать метод: after или: before...

HTML

<a href="#" onclick="location.href='http://glyphicons.com/'; return false;" class="arrow">Click Here</a></div>

CSS

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

Это должно работать, если у вас есть шрифты глификона (они бесплатны с Bootstrap)