在vue中使用阿里图标库；在iview中使用阿里图标库；

---

在vue中使用阿里图标库；在iview中使用阿里图标库；

图标库有三种使用方式（Unicode、Font class、Symbol），此处仅探讨 Font class 的使用方法（其他方法类似）

---

一、引入：

1. 解压图标文件

2. 修改css文件中的路径

在文件 iconfont.css 引入的地方加上 ./

3. 全局引入iconfont

• 在main.js 中

import '@/styles/font_1213104_ohy1kn76wn/iconfont.css'
复制代码

• 或者在index.html中

<link rel="stylesheet" href="./src/styles/font_1213104_ohy1kn76wn/iconfont.css">
复制代码

注意：线上资源只能用<link>这种方式引入： <link rel="stylesheet" href="http://at.alicdn.com/t/font_1213104_sooqbtszuys.css">

二、使用：

1. 在页面中使用（.vue）

两种方法都可以使用

<Icon custom="iconfont iconshebei1" size="24" />

<i class="iconfont iconshebei1"></i>
复制代码

iconfont是你项目下的 font-family。可以通过编辑项目查看，默认是 iconfont。 如果改为 i-icon ，则如下方一般使用：

<Icon custom="i-icon iconshebei1" size="24" />

<i class="i-icon iconshebei1"></i>
复制代码

2. 在目录中使用（router.js）

注意：在样式的前面加上空格，可以解决 图标在菜单中显示方框 的问题

{
    path: "device-manage",
    title: "设备管理,
    icon: " iconfont iconshebei1",
}
复制代码

转载于:https://juejin.im/post/5cecf731f265da1bb96fbdd9