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

Question

使用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也不生效！
请问怎么解决？

Answer 1

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

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

Answer 2

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