在 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
Using Twitter Bootstrap glyphicons in CSS
提问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 免费提供），这应该可以工作
