css - 在 CSS 中使用 Twitter Bootstrap 字形

Question

我想添加一个 Twitter bootstrap 字形来替换下面 CSS 文件中的图像引用，但不确定如何。

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

在 HTML 中，我会按如下方式添加它:

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

有什么想法吗？

更新 - 尽管在 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;
}

不确定为什么没有被拾取？

Answer 1

我喜欢使用 :after 或 :before 方法...

HTML

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

CSS

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

假设您有 glyphicon 字体(它们随 Bootstrap 免费提供)，这应该可以工作