twitter-bootstrap 如何在不更改 HTML 的情况下在 Bootstrap 3 中用 FontAwesome 替换 Glyphicons？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26638215/
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
How to replace Glyphicons with FontAwesome in Bootstrap 3 without changing HTML?
提问by Slava Fomin II
I'm using Bootstrap 3in my project and I'm using FontAwesomeicons library instead of bundled Glyphicons.
我在我的项目中使用Bootstrap 3并且我使用的是FontAwesome图标库而不是捆绑的Glyphicons。
The problem is that I have some third-party components that rely on Glyphicons and I don't want to change their HTML.
问题是我有一些依赖 Glyphicons 的第三方组件，我不想更改它们的 HTML。
I'm including font-awesome via Bowerand SASS+ Compass(SCSS).
我通过Bower和SASS+ Compass(SCSS)包含了很棒的字体。
Is it possible to replace Glyphicons with FontAwesome without changing the HTML and applying another CSS classes?
是否可以在不更改 HTML 和应用其他 CSS 类的情况下用 FontAwesome 替换 Glyphicons？
回答by Slava Fomin II
You can use the following approach to overload GlyphiconCSS classes with FontAwesomeones using SCSS:
您可以使用以下方法使用 SCSS使用FontAwesome重载GlyphiconCSS 类：
// Overloading "glyphicon" class with "fa".
.glyphicon {
@extend .fa;
// Overloading "glyphicon-chevron-left" with "fa-arrow-left".
&.glyphicon-chevron-left {
@extend .fa-chevron-left;
}
// Overloading "glyphicon-chevron-right" with "fa-arrow-right".
&.glyphicon-chevron-right {
@extend .fa-chevron-right;
}
}
This solution is based on codeof Steven Clontz.
该解决方案基于代码的史蒂芬Clontz。
Make sure, that FontAwesome SCSS is imported before this overrides.
确保在覆盖之前导入 FontAwesome SCSS。
In the above example I'm overloading the following two Glyphicons: chevron-leftand chevron-rightwith the following FontAwesomeicons: arrow-leftand arrow-rightrespectfully.
在上面的示例中，我使用以下FontAwesome图标重载了以下两个Glyphicon：chevron-left和chevron-right 分别是：arrow-left和arrow-right。
You will need to overload all icons used in third-party components to achieve what you need.
您将需要重载第三方组件中使用的所有图标来实现您的需要。
However, consider this as a HACKand DO NOT overload ALL icons, cause it will make your CSS unnecessarily bigger!
但是，请将此视为HACK并且不要重载所有图标，因为它会使您的 CSS 不必要地变大！
Consider persuading your third-party vendor to implement support for different icon libraries. This will be a proper solution.
考虑说服您的第三方供应商实现对不同图标库的支持。这将是一个适当的解决方案。
回答by Blowsie
I made this Gist to map all glyphicon icons to font-awesome. I'd estimate it has around 95% accuracy and coverage (glyphicon has some useless icons that font-awesome doesn't).
我制作了这个 Gist 来将所有 glyphicon 图标映射到 font-awesome。我估计它有大约 95% 的准确度和覆盖率（glyphicon 有一些无用的图标，font-awesome 没有）。
https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
code removed in favor of gist
code removed in favor of gist
Even though this does over load all icons if you remove all of the glyphicon icons from your bootstrap build youll actually be saving a few bytes (- font awesome of course)
即使这会超载所有图标，如果您从引导程序构建中删除所有字形图标，您实际上会节省几个字节（-当然字体很棒）
回答by hugsbrugs
In pure CSS just define glyphicon class with same properties as font-awesome class (.fa) and make correspondance with desired icons :
在纯 CSS 中，只需定义与 font-awesome 类 (.fa) 具有相同属性的 glyphicon 类，并与所需的图标对应：
.glyphicon{
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-chevron-left:before{
content:"\f053"
}
.glyphicon-chevron-right:before{
content:"\f054"
}
