排查方法：先在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>