微信小程序引用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 相关文章推荐
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
了解VUE的render函数的使用
Jun 08 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
js中实现继承的五种方法
Jan 25 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
风格模板初级不完全修改教程
2006/10/09 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
python和C语言混合编程实例
2014/06/04 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python实现字符串加密成纯数字
2019/03/19 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Django Rest framework权限的详细用法
2019/07/25 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
就业导师推荐信范文
2015/03/27 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js