Question

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

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

我通过Bower和SASS + Compass（SCSS）包含字体真棒。

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

Answer 1

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

// 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 的based on code。

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

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

您需要重载第三方组件中使用的所有图标，以达到您的需要。

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

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

Answer 2

我制作了这个要点，将所有的glyphicon图标映射到font-awesome。我估计它有大约95％的准确率和覆盖率（glyphicon有一些无用的图标，字体很棒不会）。

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

code removed in favor of gist

即使你从引导程序构建中删除了所有的glyphicon图标，这确实会超载所有图标，实际上你会节省几个字节（当然，字体很棒）

Answer 3

在纯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"
}

如何在Bootstrap 3中使用FontAwesome替换Glyphicons而不更改HTML？

3 个答案: