我在我的项目中使用
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不必要地变大!
原文地址:https://www.jb51.cc/bootstrap/233763.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。