排查方法：先在iconfont官网下载此项目的demo直接打开demo_index.html去看一下图标是不是正常显示
可以发现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>
网友评论