微信小程序引用iconfont图标的方法


Posted in Javascript onOctober 22, 2018

最近在研究微信小程序,自己写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";
 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/

这里贴一个简单的步骤:

微信小程序引用iconfont图标的方法
转换后的目录:微信小程序引用iconfont图标的方法
将css文件在外部引入所要用的.wxss文件中即可(@import ‘../../lib/style/lib.wxss';)

最后,就可以使用啦:

.icon:after{
 font-family: 'iconfont';
 font-weight: 500;
 font-style: normal;
 content: '\e698;'
}

总结

以上所述是小编给大家介绍的微信小程序引用iconfont图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 浏览器检测代码精简版
Mar 04 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
ES6中Class类的静态方法实例小结
Oct 28 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
浅谈Web Storage API的使用
Jun 23 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 #Javascript
js异步上传多张图片插件的使用方法
Oct 22 #Javascript
js实现动态添加上传文件页面
Oct 22 #Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 #Javascript
js实现动态增加文件域表单功能
Oct 22 #Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 #Javascript
js实现input密码框显示/隐藏功能
Sep 10 #Javascript
You might like
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP如何使用Memcached
2016/04/05 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
Python实现分割文件及合并文件的方法
2015/07/10 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
python利用platform模块获取系统信息
2020/10/09 Python
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
公司端午节活动方案
2014/02/04 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
文体活动实施方案
2014/03/27 职场文书
感恩寄语大全
2014/04/11 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
健康状况证明模板
2014/10/23 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
HttpClient实现表单提交上传文件
2022/08/14 Java/Android