步骤 1: 阿里巴巴素材库搜索图标,并加入购物车

前端图标引入 - 图1

前端图标引入 - 图2

步骤 2 :完后选择自己喜欢的图标加入到项目中,点击生成在线链接

前端图标引入 - 图3

步骤 3 :图标的加载

前端图标引入 - 图4

将红色框中的部分复制项目中,也就是‘2065445_5oemjr1dlc8’在

/src/config/env.js

  1. // 图表库为avue和pig2套地址, 若需扩展,在此数组后追加项目
  2. const iconfontVersion = ['567566_qo5lxgtishg', '2065445_5oemjr1dlc8']

前两个数组的图标不能删除,那是支持avue框架的全局图标,如果多个图标库依次添加到数据中即可

步骤 4 :图标的调用

图标选择器 type: “icon-select”

维护 图标选择器 列表 src/iconList.js`

  1. export default [
  2. {
  3. label: '阿里云图标',
  4. list: [
  5. 'icon-quanxianguanli',
  6. ...
  7. ]
  8. }
  9. ]

前端图标引入 - 图5

class 引用

  1. <i class="icon-bofangqi-suoping"></i>

ps,如果点击更新URL,更新env.js