微信小程序 引用 Font Awesome
2019-02-15 本文已影响0人
MrTricker
一、从官网下载 Font Awesome
官网链接 ->
Font Awesome
下载完成后解压,找到 webfonts
文件夹并打开。
二、打开对字体库进行转码
- 点击
Add fonts
,找到/path/to/fontawesome-free-version-web/webfonts
选择fa-solid-900.woff2
并上传。 - 打开
Base64 encode
。 - 点击
Convert
。 - 点击
Download
下载文件并解压,打开stylesheet.css
文件。
三、把 Font Awesome
添加到 小程序项目
- 在项目根目录创建
fontawesome
文件夹,并在文件夹内创建fontawesome.wxss
和solid.wxss
文件。 - 把刚刚打开的
stylesheet.css
文件内的第二段@font-face
代码拷贝到solid.wxss
文件内。
- 再把
path/to/fontawesome-free-version-web/css/fontawesome.css
中全部代码拷贝到fontawesome.wxss
文件内。 - 最后在项目内
app.wxss
文件内添加如下代码:
@import "./fontawesome/fontawesome.wxss";
@import "./fontawesome/solid.wxss";
四、至此结束
现在,已经可以在任意 wxml
文件内使用 Font Awesome
图标了。例:
<text class="fas fa-question"></text>