使用vue-cli生成的项目引用iview组件库,字体图标不显示

昵称
  • 196

使用vue-cli生成的项目引用iview组件库,
然后使用重置字体:

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif !important;
}

然后使用iview组件,比如DatePicker,字体图标不显示!
然后我尝试把上面的 font-family去掉,结果字体图标显示了,然后我看到iview.css中引用字体图标的代码:

@font-face {
    font-family: Ionicons;
    src: url(fonts/ionicons.eot?v=2.0.0);
    src: url(fonts/ionicons.eot?v=2.0.0#iefix) format("embedded-opentype"), url(fonts/ionicons.ttf?v=2.0.0) format("truetype"), url(fonts/ionicons.woff?v=2.0.0) format("woff"), url(fonts/ionicons.svg?v=2.0.0#Ionicons) format("svg");
    font-weight: 400;
    font-style: normal
}

我修改为font-family: Ionicons !important也不生效!
请问怎么解决?

回复
阅读 9.1k
2 个回答
✓ 已被采纳

这些组件使用的字体文件都是通过:before,:after实现的,而你重置样式的时候,同时重置了:before,:after的字体,并且加了!important,导致字体显示不了,需要重置样式为:

.ivu-icon:before,
.ivu-icon:after {
    font-family: Ionicons !important;
}

放到全局 <style>...</style> 里先看看

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏