在 CSS 中使用 Twitter Bootstrap 字形

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14238905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:15:07  来源:igfitidea点击:

Using Twitter Bootstrap glyphicons in CSS

cssimagetwitter-bootstrapglyphicons

提问by user1746582

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

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

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

In HTML I would add it as follows:

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

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

Any ideas?

有任何想法吗?

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

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

not sure why it's not being picked up ?

不知道为什么它没有被拿起?

采纳答案by Tepken Vannkorn

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

那么你为什么不<i>为你的编辑按钮使用标签呢?尝试这个:

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

回答by Nick

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

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

HTML

HTML

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

CSS

CSS

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

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

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