没有Glyphicons的Bootstrap 3，改用Font Awesome

Question

我希望使用Font Awesome替换Bootstrap 3的Glyphicons。由于Font Awesome已经包含大部分Glyphicons，我不想再包含它们以避免重复和兼容性问题。当我制作自定义的Bootstrap下载并取消勾选glyphicon组件时，仍然会在CSS文件中看到一些glyphicon引用。http://getbootstrap.com/customize/如何完全禁用这些图标？谢谢。

- denoise

Answer 1

编译后的CSS中剩余的6个Glyphicons引用是关于Carousel组件中下一个和上一个按钮的可选使用。由于相关声明也用于非Glyphicons下一个和上一个按钮，并且仅占文件总大小的微不足道的一部分，我建议将它们忽略掉。就实际情况而言，您已经从构建中删除了Glyphicons。

如果您一定要消除这些引用，那么请先手动编译Bootstrap，然后从bootstrap/less/carousel.less中删除有问题的行，从bootstrap/less/bootstrap.less中删除@import "glyphicons.less"; 行。
或者，您只需手动编辑Bootstrap自定义器已经为您生成的CSS，因为相关的删除操作非常简单。

- cvrebert

Answer 2

解决less的方案（已测试适用于bootstrap 3.3.5）：

首先，覆盖走马灯的图标：

// 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);
    }
}

这部分内容来自于Slava Fomin的回答，基于Steven Clontz的基础代码。

下一步：禁用字形图标加载:

//** 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";

不要忘记关于lessc 惰性加载的事情：@icon-font-svg-id 和其他变量将拥有你设置的最新值。

- maxkoryukov

---

在这里，您可以找到一个 SCSS 变体：https://dev59.com/VF8d5IYBdhLWcg3wmDKf - Marvin Rabe

Answer 3

当我使用带有 Font Awesome 的 Bootstrap 时，我前往定制页面并像你一样取消了 glyphicon 组件，但是一段时间后，我还在我的（覆盖文件）中添加了这些代码行：

[class^="icon-"],
[class*="icon-"] {
  background: none;
}

您可以打开您下载的主要Bootstrap文件（自定义），并搜索font-family: 'Glyphicons Halflings';，然后注释掉所有的@font-face。希望这能帮到您。

- AhmedBinNasser