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

Question

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

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

我通过Bower和SASS + Compass(SCSS)包括字体真棒.

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

Answer 1

您可以使用以下方法使用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;
    }
}

该解决方案基于代码的史蒂芬Clontz.

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

在上面的例子中我超载了以下两个Glyphicons:雪佛龙左和雪佛龙权具有以下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中，只需定义glyphicon类，使其具有与font-awesome类（.fa）相同的属性，并与所需图标进行对应即可：

.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"
}