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

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

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

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

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

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

code removed in favor of gist

---

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