排查方法:先在iconfont官網(wǎng)下載此項目的demo直接打開demo_index.html去看一下圖標是不是正常顯示
可以發(fā)現(xiàn)UI上傳的圖標,在Unicode模式和font class模式下本身就是小黑塊無法顯示骤视,可能是UI做了圖標的色彩導致的,所以此時項目中只能用第三種symbol方式引入圖標白群。
項目用的nuxt框架尚胞,如何使用symbol模式呢?
1帜慢、引入iconfont.js
在nuxt.config.js的plugins寫入 { src: '~/assets/fonts/iconfont.js', ssr: false },
寫入后項目的eslint報錯笼裳,新建了.eslintignore文件,將iconfont.js忽略粱玲,報錯消失
2躬柬、在公共樣式中寫入
.icon {
? width: 1em;
? height: 1em;
? vertical-align: -0.15em;
? fill: currentColor;
? overflow: hidden;
}
3、使用
<svg class="icon svg-icon" aria-hidden="true">
? ? ?<use xlink:href="#reportsfont-biaoqianhuise1"></use>
?</svg>?