twitter-bootstrap 没有 Glyphicons 的 Bootstrap 3 替换为 Font Awesome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22029116/
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
Bootstrap 3 without Glyphicons replaced with Font Awesome
提问by denoise
I want to remove Bootstrap 3 Glyphicons in favor of Font Awesome. Since Font Awesome already includes most of the Glyphicons y don't want to include them and avoid duplicates and compatibility problems.
我想删除 Bootstrap 3 Glyphicons 以支持 Font Awesome。由于 Font Awesome 已经包含了大部分 Glyphicon，您不想包含它们并避免重复和兼容性问题。
when I make a customized bootstrap download and I uncheck the glyphicon component, I still see some glyphicon references on the css file. http://getbootstrap.com/customize/
当我进行自定义引导程序下载并取消选中 glyphicon 组件时，我仍然在 css 文件中看到一些 glyphicon 引用。http://getbootstrap.com/customize/
How can I disable those icons entirely ?
如何完全禁用这些图标？
thanks
谢谢
采纳答案by cvrebert
Those 6 remaining Glyphicons references in the compiled CSS are regarding the optional use of Glyphicons for the next+prev buttons in the Carousel component. Since the declarations in question are also used for the non-Glyphicon next+prev buttons and represent an absolutely trivial amount of the total file size, I suggest simply ignoring them. For all practical purposes, you've already eliminated Glyphicons from your build.
编译后的 CSS 中剩余的 6 个 Glyphicons 引用是关于轮播组件中 next+prev 按钮的 Glyphicons 的可选使用。由于有问题的声明也用于非 Glyphicon next+prev 按钮，并且代表总文件大小的绝对微不足道的数量，我建议简单地忽略它们。出于所有实际目的，您已经从构建中消除了 Glyphicon。
If you absolutely must annihilate said references, then compile Bootstrap manually, beforehand removing the offending lines from bootstrap/less/carousel.lessand removing the @import "glyphicons.less";line from bootstrap/less/bootstrap.less.
Or you can just manually edit the CSS that the Bootstrap Customizer already generated for you, since the relevant deletions are trivial.
如果你绝对必须歼说引用，然后手动编译引导，从预先去除有问题的线路bootstrap/less/carousel.less和取出@import "glyphicons.less";的线bootstrap/less/bootstrap.less。
或者您可以手动编辑 Bootstrap 定制器已经为您生成的 CSS，因为相关的删除是微不足道的。
回答by maxkoryukov
Solution for less(tested for bootstrap 3.3.5):
少的解决方案（针对引导程序 3.3.5 测试）：
First, override icons for carousel:
首先，覆盖轮播图标：
// 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 part is taken from Slava Fomin answer, based on Steven Clontz's base code.
这部分取自Slava Fomin 的回答，基于 Steven Clontz 的 基本代码。
Next step: disable glyphicons loading:
下一步：禁用字形加载：
//** Load fonts from this directory.
@icon-font-path: "../fonts/";
//** File name for all font files.
@icon-font-name: "fontawesome-webfont";
//** Element ID within SVG icon file.
@icon-font-svg-id: "fontawesomeregular";
Do not forget about lessc lazy loading: @icon-font-svg-idand other vars will have the latest value you have set.
不要忘记 lessc延迟加载：@icon-font-svg-id其他变量将具有您设置的最新值。
回答by Ahmed Na.
As i use bootstrap with Font Awesome, i go to customize page and I unchecked the glyphicon component as you did, but for some time i also add this lines of codeat my ( override file ):
当我将引导程序与 Font Awesome 一起使用时，我转到自定义页面，并像您一样取消选中 glyphicon 组件，但有一段时间我还在我的（覆盖文件）中添加了以下代码行：
[class^="icon-"],
[class*="icon-"] {
background: none;
}
also you can open the main bootstrap file that you downloaded ( customized one ) and search for font-family: 'Glyphicons Halflings';, then comment all the @font-face.
你也可以打开你下载的主引导文件（定制的）并搜索font-family: 'Glyphicons Halflings';，然后评论所有的@font-face.
Hope this will help you
希望能帮到你
