vue引用iconfont图标的流程

1. 进入iconfont官方网站 链接
2. 搜索相应的图标

   

3. 选择图标添加入库

   

4. 点击导航条购物车，查看当前库中图标，点击添加至项目

   

   

5. 若无项目，点击右上角文件夹添加新的项目，然后将图标添加进项目

   

6. 添加完成后自动进入我的项目页，或由导航条进入我的项目

   

7. 编辑项目前缀和font-family（本人使用的是elementui，因此前缀为el-icon-）

   

   

8. 对单个图标进行编辑，修改class名称

   

   

9. 选择下载至本地

   

10. 将下载文件解压后获得如下文件

    

11. 将除了demo的其他文件添加到项目assets -- iconfont中

    

12. main.js文件中导入iconfont.css

    import '@/assets/iconfont/iconfont.css'

     

13. 使用

    <i class="el-icon-username"></i>

14. 效果