在不更改HTML的情况下，如何在Bootstrap 3中用FontAwesome替换Glyphicons? [英] How to replace Glyphicons with FontAwesome in Bootstrap 3 without changing HTML?

问题描述

我在项目中使用 Bootstrap 3 ，并且正在使用 Glyphicons .

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

我通过 Bower 和指南针(SCSS).

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

解决方案

您可以使用以下方法重载 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 的代码， >.

请确保在此替代之前导入了FontAwesome SCSS.

在上面的示例中，我使用以下重载了以下两个 Glyphicons : chevron-left 和 chevron-right FontAwesome 图标:分别向左箭头和向右箭头.

您将需要重载第三方组件中使用的所有图标来实现所需的功能.

但是，请将其视为 HACK ，并且请勿超载所有图标，因为这会使CSS不必要地变大！

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

I'm using Bootstrap 3 in my project and I'm using FontAwesome icons library instead of bundled Glyphicons.

The problem is that I have some third-party components that rely on Glyphicons and I don't want to change their HTML.

I'm including font-awesome via Bower and SASS + Compass (SCSS).

Is it possible to replace Glyphicons with FontAwesome without changing the HTML and applying another CSS classes?

解决方案

You can use the following approach to overload Glyphicon CSS classes with FontAwesome ones using SCSS:

// 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;
    }
}

This solution is based on code of Steven Clontz.

Make sure, that FontAwesome SCSS is imported before this overrides.

In the above example I'm overloading the following two Glyphicons: chevron-left and chevron-right with the following FontAwesome icons: arrow-left and arrow-right respectfully.

You will need to overload all icons used in third-party components to achieve what you need.

However, consider this as a HACK and DO NOT overload ALL icons, cause it will make your CSS unnecessarily bigger!

Consider persuading your third-party vendor to implement support for different icon libraries. This will be a proper solution.

这篇关于在不更改HTML的情况下，如何在Bootstrap 3中用FontAwesome替换Glyphicons?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！