微信小程序引用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 TO HTML 转换
Jun 26 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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代码
2007/03/08 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php读取3389的脚本
2014/05/06 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
Python splitlines使用技巧
2008/09/06 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Python list运算操作代码实例解析
2020/01/20 Python
python add_argument()用法解析
2020/01/29 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
一组SQL面试题
2016/02/15 面试题
八一建军节活动方案
2014/02/10 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
四风自我剖析材料
2014/09/30 职场文书
公司感谢信范文
2015/01/22 职场文书
大学毕业生个人总结
2015/02/28 职场文书