微信小程序如何引用iconfont图标
来源:互联网 发布:企业内部网络建设 编辑:程序博客网 时间:2024/05/20 05:29
最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是:
@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg');}.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
这是往常的写法,但是发现这样的写法要报错,后来查了一下,发现小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64,然后引用。
方法:
在阿里巴巴图标库下载下来以后,将iconfont.ttf转换即可。转换地址:https://transfonter.org/
这里贴一个简单的步骤:
转换后的目录:
将css文件在外部引入所要用的.wxss文件中即可(@import ‘../../lib/style/lib.wxss’;)
最后,就可以使用啦:
.icon:after{ font-family: 'iconfont'; font-weight: 500; font-style: normal; content: '\e698;'}
注意:我找了大半天发现没找到content: ‘\e698;’这个码,后来查了发现其实就是unicode码的一个转换,变成content: “/fffc”而已。
文章参考:http://www.cnblogs.com/fayin/p/6347359.html
1 1
- 微信小程序如何引用iconfont图标
- 微信小程序如何引入外部字体库 Iconfont
- 微信小程序----引入外部字体库iconfont的图标
- IconFont 图标的3种引用方式
- 引用阿里巴巴(iconfont)字体图标
- webpack中如何使用iconfont字体图标
- 安卓中如何使用iconfont字体图标
- 如何批量添加阿里巴巴图标 iconfont
- 如何使用IconFont?——矢量图标
- iconfont图标
- iconfont图标
- 微信小程序如何使用阿里妈妈iconfont图标库
- Android如何设置图标字体 IconFont(HTML图标)
- 微信小程序中使用iconfont
- IOS 使用IconFont 图标
- Iconfont 图标字体
- iconfont图标使用方法
- 图标 iconfont的使用方法
- Windows SDK 7.1 or 7.0 with VS 2008?
- 数据结构实验之图论四:迷宫探索
- javaee项目因在eclipse修改项目名 引起的错误解决方法
- java synchronized详解
- 数据库文件过大异常及解决方案
- 微信小程序如何引用iconfont图标
- 补充:MyMeans类
- 【BZOJ 2823】[AHOI2012]信号塔 随机增量
- Eclipse快捷键大全
- 安装了MathType但Word中公式打不开
- VPN服务嗅探工具ike-scan
- JavaScript入门篇--DOM操作
- Jenkins搭建.NET自动编译测试与发布环境
- python中使用xmltodic处理xml文件,关于其中的列表问题。