原因
iconfont.css 文件中的引用图标的默认路径错误,对该路径进行修改即可。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f24b64cbbd810a4ff4c33f65002be5bf.png)
解决方法
1、改成绝对路径。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c84a4730573610c4307885cdfeadfa5b.png)
2、如果文件在 App.vue 中进行了全局引入,则将图标的路径改成 App.vue 文件的相对路径。
App.vue:
<style>
@import 'common/css/font/iconfont.css'
</style>
iconfont.css:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/06e2bdfc79983e8536c0acc4a254e218.png)
3、使用 iconfont 提供的网络路径。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/50a94debdcda511db0d42abe1525df49.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8803a4fab24c27dbc061d20327ef9efd.png)
👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/15f62d21e5e550b41fee51a174dec41e.png)