阿里巴巴矢量图标库- iconfont 图标使用方法 - vue 项目

阿里巴巴矢量图标库 - iconfont 图标使用方法 - vue 项目

阿里巴巴的字体图标库可选择的样式很多，我们时常需要用到，我来梳理一下使用步骤。

步骤一: 搜索

浏览器搜索 iconfont , 进入 iconfont 官网
附图:

直达链接

步骤二: 查找

1. 搜索你想要的图标
附图 :

2. 选择(多个)你想要的图标, 点击第一个 添加入库 , 即可在右上角购物车样式的 库 中查看已经添加的图标
附图 :

3. 点击右上角购物车样式的 库 之后, 点击 添加至项目
附图 :

4. 新增一个项目(名称随便起), 点击 确定
附图 :

5. 选择第二个 fontclass 后, 点击 暂无代码,点此生成
附图 :

6. 点击 点此复制代码
附图 :

7. 在浏览器中新建一个页面, 在网址中粘贴进去, 即可得到我们需要的图标样式代码 . 复制网页中显示的全部的具体样式代码
附图 :

步骤三: 项目中使用

1. 在项目中新建 iconfont.css 文件 , 把网页中显示的具体样式代码原封不动地粘贴进去
附图 :

注 : 我们可以在 .iconfont 中自定义字体图标的样式属性 :

2. 在项目中导入 iconfont.css 文件(可在 main.js中导入一次; 也可在具体模块中导入) , 路径因个人项目结构而定, 别写错了
附图 :

3. 在要用到字体图标的地方, 在对应标签上加 class 属性 , 属性名有两个 , 分别是: 阿里巴巴图标库名 iconfont (红色箭头指向处) 和 库中具体的字体图标名 (绿色箭头指向处)
附图 :

到此, 阿里巴巴字体图标 已经可以在 vue项目中使用 !

说得很啰嗦。大家可以下看 官方的使用说明 。你会觉得还是我讲得详细 !
直达链接