微信小程序中如何使用阿里巴巴矢量图标库的iconfont字体图标?
2018-09-27 22:08
1351 查看
一、首先打开阿里巴巴矢量图标库网址www.iconfont.cn,来到如下界面,先注册一个账号。
二、搜索栏内你需要的字体图标
三、来到下面界面,这时出现了很多字体图标
四、下面随便选一字体图标来举一个例子,演示一下大致的流程,点击字体图标的小车(add to cart)
五、点击右上角的小车图标
六、这里介绍两种方法来下载生成字体图标的源代码,第一种选择Download code
点击刚才下载到的压缩包
选择iconfont.css打开
打开之后把源码复制(记住是全部复制,一点也不留哦)到微信小程序的app.wxss内即可(如果你不想设置为全局的,你可以放到对应的wxss文件内也可以)
还有一种方法在介绍一下;在上述第六大点选择Add to Project
进入你的创建的项目
将 //at.alicdn.com/t/font_851593_jq5rczy17ym.css 复制到浏览器打开
把源码复制(记住是全部复制,一点也不留哦)到微信小程序的app.wxss内即可(如果你不想设置为全局的,你可以放到对应的wxss文件内也可以)
接下来可以试一下了。
可以和以下博客链接对应着看
阅读更多相关文章推荐
- WPF使用矢量字体图标(阿里巴巴iconfont)
- 微信小程序中引入iconfont阿里巴巴矢量图标
- 微信小程序中使用iconfont/font-awesome等自定义字体图标
- 微信小程序 如何引入外部字体库iconfont的图标
- 微信小程序如何使用阿里妈妈iconfont图标库
- 如何在微信小程序中使用iconfont图标 & 小程序模板的调用
- 微信小程序如何引入外部字体库iconfont的图标
- 微信小程序----引入外部字体库iconfont的图标
- 如何在HTML中使用图标字体 - icon font?
- 微信小程序如何引用iconfont图标
- 如何在HTML中使用图标字体 - icon font?
- 如何在VUE项目里使用阿里巴巴 iconfont 图标库里的彩色图标(svg图标)
- webpack中如何使用iconfont字体图标
- 微信小程序中使用阿里矢量字体图标
- CSS3 iconfont矢量字体图标的使用
- Ionic使用Iconfont-阿里巴巴矢量图标库
- 如何在HTML中使用图标字体 - icon font?
- 使用阿里巴巴图标库生成iconfont字体图标
- 如何在HTML中使用图标字体 - icon font?
- 安卓中如何使用iconfont字体图标