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

Posted 2023-02-16

【中文标题】如何在不更改 HTML 的情况下在 Bootstrap 3 中用 FontAwesome 替换 Glyphicons？

【英文标题】：How to replace Glyphicons with FontAwesome in Bootstrap 3 without changing HTML?

【发布时间】：2014-12-25 14:55:04

【问题描述】：

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

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

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

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

【参考方案1】：

您可以使用以下方法重载 Glyphicon CSS 类和使用 SCSS 的 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 图标：分别为 arrow-left 和 arrow-right。

您需要重载第三方组件中使用的所有图标才能实现您的需要。

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

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

【讨论】：

我同意这个答案，并且已经完成了从 Font Awesome 到 Icomoon 的确切场景切换。我要补充的是，Glyphicon 需要慢慢切换到正确的 FA 图标，这样它就不会同时加载两个集合。

在导入 FontAwesome SCSS 时，我遇到了加载实际字体的问题，我不得不用$fa-font-path: "/bower_components/font-awesome/fonts"; 设置字体路径，不知道是否有更好的方法来做到这一点？跨度>

@PatriciaGarcia 我认为这是指定字体路径的正确方法。但是，我不会将bower_components 目录直接公开给网络，我只公开我需要的特定文件或目录。在 Linux 下使用符号链接可以轻松实现。这也将有助于减少构建的大小。

好点@SlavaFominII，这只是我在本地运行的一个测试项目，所以我没有过多考虑性能，但公开整个bower_components 目录确实是个坏主意。跨度>

【参考方案2】：

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

【讨论】：

这避免了所有“从 SCSS 转换”的怪物。干得好

我已经在我们的代码库中有这个，并且在将字体真棒升级到 v5 免费后它不再显示（它似乎应该可以工作，因为每个图标的 unicode 没有改变）。我所要做的就是添加 font-weight: 700 让它显示出来。 .glyphicon:before font-weight: 700;

只是补充一点，您需要在 中包含以下行，否则它将不起作用：

【参考方案3】：

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

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

code removed in favor of gist

---

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

【讨论】：

` &.glyphicon-transfer @extend .fa-exchange ` 还要解决一个问题。