微信小程序如何使用阿里妈妈iconfont图标库
来源:互联网 发布:淘宝生活服务类目 编辑:程序博客网 时间:2024/05/21 16:55
1、首先进入iconfont首页,没有账号的先注册账号
http://www.iconfont.cn/
2、选择需要的图标,加入到你的小车中
3、在这里新建一个项目将图标加进去,这个时候就可以查看并且下载下来了
4、点击download code将图标代码下载下来,解压后找到iconfont.css文件打开,将内容全部复制到你需要添加图标的wxss文件中,然后再到阿里妈妈iconfont的项目中将@font-face的代码替换掉
@font-face { font-family: 'iconfont'; /* project id 505251 */ src: url('//at.alicdn.com/t/font_505251_xz8fpgd9ky3f2yb9.eot'); src: url('//at.alicdn.com/t/font_505251_xz8fpgd9ky3f2yb9.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_505251_xz8fpgd9ky3f2yb9.woff') format('woff'), url('//at.alicdn.com/t/font_505251_xz8fpgd9ky3f2yb9.ttf') format('truetype'), url('//at.alicdn.com/t/font_505251_xz8fpgd9ky3f2yb9.svg#iconfont') format('svg');}5、在view中引用图标就OK了
<navigator url="/pages/navigate/navigate" hover-class="navigator-hover"> <text class="iconfont icon-kehu"></text>\n关于我们 </navigator>
.icon-qiye:before { content: "\e6ad"; }.icon-kehu:before { content: "\e6ae"; }.icon-crm:before { content: "\e6af"; }
图标的颜色改变和大小变更还没搞清楚如何操作,还要研究下
阅读全文
0 0
- 微信小程序如何使用阿里妈妈iconfont图标库
- iconfont在ionic中的使用(阿里图标库)
- 阿里妈妈字体图标(iconfont)使用介绍
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
- ionic 使用Iconfont-阿里巴巴矢量图标库
- Iconfont 图标库在Android项目中的使用
- 使用阿里巴巴图标库生成iconfont字体图标
- Ionic使用Iconfont-阿里巴巴矢量图标库
- 使用阿里巴巴图标库生成iconfont字体图标
- ElementUI使用第三方图标库Iconfont
- 阿里图标库的使用
- 好用的字体图标插件:阿里图标库(iconfont)
- 优秀工具介绍之——Iconfont 阿里图标库
- 阿里iconfont图标使用
- 微信小程序中使用iconfont
- font-face使用阿里图标库
- 伪类after before如何使用阿里的iconfont字体
- 微信小程序使用font-awesome图标库
- JZOJ3501. 【NOIP2013模拟联考15】消息传递
- FreeBASIC学习笔记——2.2 变量的声明
- Java获取当前时间的一天前的时间,一周前,一月前,一年前的时间
- 人工智能是大脑,物联网是身体
- 生日相同 2.0 【open judge】【结构体】
- 微信小程序如何使用阿里妈妈iconfont图标库
- PCB设计1:Altium designer模块化布局复用
- 推荐系统在百度云的实践
- 对称矩阵的判定
- 05、Android开发基础之其他布局
- poj1195——Mobile phones
- [线段树] Codechef December Challenge 2017. Red and blue points
- 软体 servlet
- c