如何在不更改HTML的情况下用FontAwesome取代Bootstrap 3中的Glyphicons？

Question

如何在不更改HTML的情况下用FontAwesome取代Bootstrap 3中的Glyphicons？

twitter-bootstrapsassfont-awesomecompassglyphicons

15

我正在项目中使用 Bootstrap 3，并且使用 FontAwesome 图标库替代了捆绑的 Glyphicons。

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

我通过 Bower 和 SASS + Compass (SCSS) 引入 font-awesome。

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

- Slava Fomin II

3个回答

10

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

- hugsbrugs

这样做避免了所有“从SCSS转译”的丑陋操作。干得好。 - tonysepia

我们的代码库中已经有这个内容了，但在将 font awesome 升级到 v5 免费版后就不再显示了（因为每个图标的 unicode 码似乎没有改变，所以本应该可以正常显示）。只需要加上 "font-weight: 700" 就可以让它重新显示出来了。.glyphicon:before { font-weight: 700; } - JesseDahl

只是要补充一下，您需要在<head>中添加以下行，否则它将无法正常工作：<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> - dota

7

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

链接如下：https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9 尽管这会使所有图标超负荷，但如果您从bootstrap构建中删除所有glyphicon图标，则实际上可以节省一些字节（-当然不包括font awesome）。

- Blowsie

&.glyphicon-transfer { @extend .fa-exchange }还有一个需要处理。 - maszynka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Slava Fomin II · Accepted Answer

您可以使用以下方法使用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的代码。

确保在覆盖前已导入FontAwesome SCSS。

在上面的示例中，我正在使用以下Glyphicons来进行重载：chevron-left和chevron-right，并使用以下FontAwesome图标进行替换：arrow-left和arrow-right。

您需要重载所有用于第三方组件的图标以实现所需的效果。

但是，请将其视为“HACK”，不要重载所有图标，因为它会使您的CSS变得不必要的更大！

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