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

twitter-bootstrap CSS

老丝阿飞

2020-04-07

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

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

我通过BowerSASS + Compass(SCSS)加入了超棒的字体

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

第4093篇《如何在Bootstrap 3中用FontAwesome替换Glyphicons,而不更改HTML?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
达蒙 2020.04.07

在纯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"
}
L泡芙Jim 2020.04.07

您可以使用以下方法通过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不必要地变大!

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

GO 2020.04.07

我做了这个要点,以将所有glyphicon图标映射到超棒的字体。我估计它具有约95%的准确性和覆盖率(glyphicon有一些无用的图标,而真棒字体则没有)。

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

code removed in favor of gist


即使这样做确实会重载所有图标,但是如果您从引导程序构建中删除所有glyphicon图标,您实际上也会节省一些字节(-字体的确很棒)

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android