微信小程序如何引用iconfont图标

最近在研究微信小程序，自己写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/
这里贴一个简单的步骤：

转换后的目录：
将css文件在外部引入所要用的.wxss文件中即可（@import ‘../../lib/style/lib.wxss’;）

最后，就可以使用啦：

.icon:after{font-family:'iconfont';font-weight:500;font-style:normal;content:'\e698;'}

文章参考：http://www.cnblogs.com/fayin/p/6347359.html

微信小程序如何引用iconfont图标相关推荐

微信小程序中使用iconfont图标
方案一: 利用小程序中不支持 ttf 字体,却支持 base64 的特点,我们可以通过将 ttf 字体转码成 base64 ,再通过 iconfont 的特点,通过设置字体大小和颜色来达到目的. 具体 ...
微信小程序如何引入iconfont图标字体库
我选择引入字体图标库的原因是加载图片会影响小程序页面的打开速度第一步: 去阿里巴巴的图标库找到你喜欢的图标加入购物车添加到你创建的项目在下载的文件中把css文件后缀名改为wxss放入你的小程序项目 ...
微信小程序中使用 iconfont 图标的四种方法
1. 先去 iconfont 官网选择自己需要的图标,添加到项目中点击红框在浏览器中输入地址,得到的文件另存为 iconfont.wxss,放入项目的根目录下打开 app.wxss @impor ...
微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
在微信小程序中使用iconfont
微信小程序上使用iconfont的方法一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 ...
微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
微信小程序-如何使用icon图标
原微信小程序使用字体图标 2017年07月03日 19:29:09 阅读数:24209 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图 ...
uniapp开发微信小程序，引用微信物理查询插件
使用uniapp开发微信小程序,引用微信官方提供的物流查询插件开发时遇到的问题: 项目内有两个分包都有使用物流查询插件,所以插件的引入只能放在manifest.json>mp-weixin里面 ...

微信小程序如何引用iconfont图标

微信小程序如何引用iconfont图标相关推荐

最新文章

热门文章