【问题标题】:How to replace Glyphicons with FontAwesome in Bootstrap 3 without changing HTML?如何在不更改 HTML 的情况下在 Bootstrap 3 中用 FontAwesome 替换 Glyphicons?
【发布时间】:2026-01-29 17:00:01
【问题描述】:

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

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

我通过 BowerSASS + Compass (SCSS) 加入了 font-awesome。

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

【问题讨论】:

    标签: twitter-bootstrap sass font-awesome compass glyphicons


    【解决方案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 Clontzbased on code

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

    在上面的示例中,我重载了以下两个 Glyphiconschevron-leftchevron-right 具有以下 FontAwesome 图标:分别为 arrow-leftarrow-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 }` 还要解决一个问题。
    最近更新 更多