微信小程序引用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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
js倒计时显示实例
Dec 11 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
详解微信小程序与内嵌网页交互实现支付功能
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间隔一段时间执行代码的方法
2014/12/02 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
PHP $O00OO0=urldecode & eval 解密,记一次商业源码的去后门
2020/09/13 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
js function定义函数使用心得
2010/04/15 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
js函数排序的实例代码
2013/07/01 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
python定时器(Timer)用法简单实例
2015/06/04 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python单元测试简单示例
2018/07/03 Python
python设置环境变量的原因和方法
2019/06/24 Python
pytorch 模型可视化的例子
2019/08/17 Python
python中有函数重载吗
2020/05/28 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2014年督导工作总结
2014/11/19 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle