Question

我想删除Bootstrap 3 Glyphicons以支持Font Awesome。由于Font Awesome已包含大部分Glyphicons，因此不希望包含它们并避免重复和兼容性问题。

当我进行自定义引导程序下载并取消选中glyphicon组件时，我仍然会在css文件上看到一些glyphicon引用。 http://getbootstrap.com/customize/

如何完全禁用这些图标？

感谢

Answer 1

编译的CSS中剩下的6个Glyphicons引用是关于可选地使用Glyphicons用于Carousel组件中的下一个+ prev按钮。由于有问题的声明也用于非Glyphicon next + prev按钮，并且代表了总文件大小的绝对微量，我建议简单地忽略它们。出于所有实际目的，您已经从构建中删除了Glyphicons。

如果您绝对必须消灭所述引用，然后compile Bootstrap manually，请事先从bootstrap/less/carousel.less删除违规行并从@import "glyphicons.less";删除bootstrap/less/bootstrap.less行。
或者你可以手动编辑Bootstrap Customizer已经为你生成的CSS，因为相关的删除很简单。

Answer 2

当我使用带有Font Awesome的bootstrap时，我去自定义页面并且我取消选中了glyphicon组件，但是有一段时间我也在我的（覆盖文件）中添加这行代码 ：

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

您也可以打开下载的主要引导程序文件（自定义文件）并搜索font-family: 'Glyphicons Halflings';，然后对@font-face进行评论。

希望这会对你有所帮助

Answer 3

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 answer，基于Steven Clontz的base code。

下一步：禁用字形加载：

//** 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 lazy loading：@icon-font-svg-id，其他vars将拥有您设置的最新值。

没有Glyphicons的Bootstrap 3替换为Font Awesome

3 个答案: