微信小程序引用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 相关文章推荐
js 分页全选或反选标识实现代码
Aug 09 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
js与applet相互调用的方法
Jun 22 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
js中url对象化管理分析
Dec 29 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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实现json编码的方法
2015/07/30 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Django中使用group_by的方法
2015/05/26 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
仓库门卫岗位职责
2013/12/22 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
Java设计模式之代理模式
2022/04/22 Java/Android