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

逆天 · 04月07日

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

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

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

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

回答(3)
时间
达蒙
3 · 2020-04-07 11:38:51

在纯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
L泡芙Jim
2 · 2020-04-07 11:38:51

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

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

G
GO
1 · 2020-04-07 11:38:51

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

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

code removed in favor of gist


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

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序