微信小程序引用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写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
JavaScript中的闭包
Feb 24 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
JavaScript实现下拉列表
Jan 20 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 preg_replace替换实例讲解
2013/11/04 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python发送邮件实例分享
2017/07/28 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
小学新学期教师寄语
2014/01/18 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
KTV员工管理制度
2015/08/06 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python