我在我的项目中使用
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不必要地变大！