鍍金池/ 問答/C++  HTML/ 使用vue-cli生成的項(xiàng)目引用iview組件庫，字體圖標(biāo)不顯示

使用vue-cli生成的項(xiàng)目引用iview組件庫，字體圖標(biāo)不顯示

使用vue-cli生成的項(xiàng)目引用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，字體圖標(biāo)不顯示！
然后我嘗試把上面的 font-family去掉，結(jié)果字體圖標(biāo)顯示了，然后我看到iview.css中引用字體圖標(biāo)的代碼：

@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也不生效！
請(qǐng)問怎么解決？

回答
編輯回答
朕略傻

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

2017年8月17日 20:45
編輯回答
未命名

這些組件使用的字體文件都是通過:before，:after實(shí)現(xiàn)的，而你重置樣式的時(shí)候，同時(shí)重置了:before，:after的字體，并且加了!important，導(dǎo)致字體顯示不了，需要重置樣式為：

.ivu-icon:before,
.ivu-icon:after {
    font-family: Ionicons !important;
}
2017年5月17日 05:25