微信小程序使用Font Awesome字体图标

今天研究了一下小程序,发现还是很有意思的,但是在遇到字体图标的时候遇到了一些小麻烦,搜索了一下,发现好几篇文章的实现方法是将字体文件编码成base64(这里),然后使用。这样能满足需求,但是会导致代码体积大,而且不是合适的方法。然后看到这篇文章有了一些想法,于是觉得测试一下。

在 https://cdn.baomitu.com/ 这个库里找到了Font Awesome字体图标,然后选择 https://lib.baomitu.com/font-awesome/5.3.1/advanced-options/use-with-node-js/fontawesome-free/css/all.css 这个文件,将里面的代码复制到 font-awesome.wxss (这个文件随便放哪里)。然后选择 https://lib.baomitu.com/font-awesome/5.3.1/advanced-options/use-with-node-js/fontawesome-free/css/all.css 这个文件,将里面的代码复制到 font-awesome.wxss (这个文件随便放哪里)。

重点来了,将font-awesome.wxss里面的相对引用替换成绝对引用,即将 ../ 替换成 https://lib.baomitu.com/font-awesome/5.3.1/advanced-options/use-with-node-js/fontawesome-free/ 。

替换后,在 需要用字体图标的页面的wxss文件中用 import font-awesome.wxss 即可。

表述能力有限,直接看代码吧:https://github.com/calchen/demo-for-wechat-miniprogram-use-font-awesome

这个方法也适用于字体~

对于使用阿里字体图标的,可以将字体图标放在CDN上,然后引用~

微信小程序使用Font Awesome字体图标》上有2个想法

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注