阿里巴巴矢量图标库 - 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项目中使用 !
说得很啰嗦。大家可以下看官方的使用说明。你会觉得还是我讲得详细 !
直达链接