微信小程序wxss样式文件中引用iconfont素材
原因: 小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64,然后引用。
解决方案如下:
一.下载阿里巴巴矢量库中自己项目的iconfont字体文件.
![](https://pic2.zhimg.com/80/v2-dde09bee6a5c4a28d7549b3ab85e4819_1440w.png)
![](https://pic2.zhimg.com/80/v2-e6cef0a438a2989eb440eaf5e9e1c8e5_1440w.png)
二. 打开这个网站, Online @font-face generator 上传字体,选择base64编码,Convert后下载.
![](https://pic4.zhimg.com/80/v2-bf38a8a8275eb3221613b601a1fa8f67_1440w.png)
![](https://pic3.zhimg.com/80/v2-05f16e11a639ceac8b6342fda2365bd6_1440w.png)
![](https://pic2.zhimg.com/80/v2-830e7cdde5ed1cb0118add8c9b8e1679_1440w.png)
三. 将下载好的文件夹中stylesheet.css样式表中的内容拷贝, 粘贴至小程序的wxss文件中,即可引用该iconfont字体图标.
![](https://pic3.zhimg.com/80/v2-6a3f0a13cd5cb5dde299fcbed059f4c2_1440w.png)
![](https://pic2.zhimg.com/80/v2-6ed51be06ee2228bf177d6ec6d689785_1440w.png)
转自:https://zhuanlan.zhihu.com/p/24697235