vue 使用iconfont图库

项目中如何使用iconfont（阿里图标库）
一. 登陆iconfont官网：
https://www.iconfont.cn/

二. 创建一个图标项目
1.点击“图标管理”子目录中的子目录“我的项目”，进入个人图标项目

 

2. 点击创建一个图标项目

 

三. 将需要的项目加入到购物车中
搜索需要的图标

 

 

选择图标，点击加入至购物车

 

 

四. 将购物车中的图标加入至所创建的图标项目中
点击购物车，进入查看所添加的图标

 

2.点击添加至项目

 

3.选择目标项目，点击确定

4.添加完成

五. Vue 项目中使用图标

main.js中导入

//导入图片库
import "@/assets/iconfont/iconfont.css"

或者app.vue中导入

组件中使用

<template>
  <div class='likebar'>

      <span class="item">
         <i class="iconfont icon-dianzan"></i>//使用

         {{video_info.thumbsup}}
        </span>
      <span class="item">
        <i class="iconfont icon-shoucang"></i>
        {{video_info.tnum}}
        </span>
      <span class="item">浏览量 {{video_info.vnum}}</span>
      <span class="item">转发</span>

  </div>
  
</template>

效果：

不足

 不足：不能一次下载所有的图标，只能在项目中下载自己选定的图片，所以如果想再加图标 需要在iconfont的项目中重新下载，导入。个人感觉有点麻烦，但是也不算特别麻烦。可能是我的方法有些许问题。可能是iconfont图库图标太多，一次性导入所以文件太大。

自己的解决办法：测试时先使用在线代码，等项目敲定再一次性下载

点击在线生成带代码

 APP.vue中导入

参考文章：inconfont vue的使用