15

我在我的项目中使用Bootstrap 3，并且我使用的是FontAwesome图标库而不是捆绑的Glyphicons。

问题是我有一些依赖 Glyphicons 的第三方组件，我不想更改它们的 HTML。

我通过Bower和SASS + Compass (SCSS) 包含了很棒的字体。

是否可以在不更改 HTML 和应用其他 CSS 类的情况下用 FontAwesome 替换 Glyphicons？

4

3 回答 3

21

您可以使用以下方法通过使用 SCSS的FontAwesome重载Glyphicon CSS 类：

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

该解决方案基于Steven Clontz的代码。

确保在此覆盖之前导入 FontAwesome SCSS。

在上面的示例中，我使用以下FontAwesome图标重载了以下两个Glyphicons：chevron-left和chevron-right ： arrow-left和arrow-right。

您将需要重载第三方组件中使用的所有图标来实现您所需要的。

但是，将此视为HACK并且不要重载所有图标，因为它会使您的 CSS 不必要地变大！

考虑说服您的第三方供应商实现对不同图标库的支持。这将是一个适当的解决方案。

于 2014-10-29T18:42:21.407 回答
9

在纯 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"
}
于 2017-03-30T15:36:27.253 回答
7

我制作了这个 Gist 以将所有 glyphicon 图标映射到 font-awesome。我估计它有大约 95% 的准确度和覆盖率（glyphicon 有一些 font-awesome 没有的无用图标）。

https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9

code removed in favor of gist

即使这确实会过载所有图标，如果您从引导程序构建中删除所有 glyphicon 图标，您实际上会节省一些字节（当然字体很棒）

于 2016-08-15T11:07:57.167 回答