阿里巴巴矢量图标库- 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项目中使用 !

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

直达链接