twitter-bootstrap – 如何在Bootstrap 3中替换FontAwesome而不

发布时间：2020-12-18 00:26:08 所属栏目：安全来源：网络整理

导读：我在我的项目中使用 Bootstrap 3,而我正在使用 FontAwesome图标库而不是捆绑的 Glyphicons. 问题是我有一些依靠Glyphicons的第三方组件,我不想改变他们的HTML. 我通过Bower和SASS Compass(SCSS)包括字体. 用FontAwesome替换Glyphicons可以不改变HTML和应用另

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

问题是我有一些依靠Glyphicons的第三方组件,我不想改变他们的HTML.

我通过Bower和SASS Compass(SCSS)包括字体.

用FontAwesome替换Glyphicons可以不改变HTML和应用另一个CSS类吗？

解决方法

您可以使用以下方法使用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的based on code.

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

在上面的例子中,我重载了以下两个Glyphicons：左下角和V形右下角的FontAwesome图标：arrow-left和arrow-right尊重.

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

但是,将其视为HACK,并且不会重载所有图标,这将使您的CSS不必要地变大！

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!