iconfont图标引入及线上使用流程(无需下载图标到本地)

1.选择图标加购物车

进入阿里巴巴矢量图标库https://www.iconfont.cn/输入图标名称,搜索图标找到想要的图标,加入购物车

2.打开购物车,添加至项目

打开购物车,点击添加至项目选择项目后,点击“确定”即可完成添加(没有对应项目可添加)

3.生成在线链接

网页导航栏 资源管理–我的项目–找到对应的项目(一般情况下以上第2条确定后自动进入到对应项目中)使用方式选择“Font class” 生成在线链接

4.项目中全局引入(两种方式) 不同框架的引入方式可能不同,这里以uniapp为例,在App.vue => style中引入

直接引入链接(图标改动时链接需要替换成最新的)

//直接引入链接(图标改动时链接需要替换成最新的)

@import '//at.alicdn.com/t/font_2728845_4jgp1q24y5p.css';

新建iconfont.css文件(图标有改动时直接替换iconfont.css的代码)

//新建iconfont.css文件(图标有改动时直接替换iconfont.css的代码)

@import 'static/iconfont/iconfont.css';

点击链接查看代码,全选复制 5.使用图标

iconfont + 图标名称样式属性font-size设置图标大小