21

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

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

在 HTML 中，我将其添加如下：

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

有任何想法吗？

更新 - 尽管它只在 Firefox 的萤火虫中显示宽度和高度，但尝试了以下操作：

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

不知道为什么它没有被捡起？

4

2 回答 2

109

我喜欢使用 :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 免费提供），这应该可以工作

于 2014-02-26T16:27:48.530 回答
2

那你为什么不使用<i>标签作为编辑按钮呢？尝试这个：

<button type="submit" name="edit" class="edit-button btn btn-primary">
   <i class="icon icon-edit icon-white"></i>
   Edit
</button>
于 2013-01-09T15:47:51.520 回答