微信小程序 引用 Font Awesome

2019-02-15  本文已影响0人  MrTricker

一、从官网下载 Font Awesome

官网链接 -> Font Awesome
下载完成后解压,找到 webfonts 文件夹并打开。

二、打开对字体库进行转码

打开 https://transfonter.org

  1. 点击 Add fonts,找到 /path/to/fontawesome-free-version-web/webfonts 选择 fa-solid-900.woff2 并上传。
  2. 打开 Base64 encode
  3. 点击 Convert
  4. 点击 Download 下载文件并解压,打开 stylesheet.css 文件。

三、把 Font Awesome 添加到 小程序项目

  1. 在项目根目录创建 fontawesome 文件夹,并在文件夹内创建 fontawesome.wxsssolid.wxss 文件。
  2. 把刚刚打开的 stylesheet.css 文件内的第二段 @font-face 代码拷贝到 solid.wxss 文件内。
  3. 再把 path/to/fontawesome-free-version-web/css/fontawesome.css 中全部代码拷贝到 fontawesome.wxss 文件内。
  4. 最后在项目内 app.wxss 文件内添加如下代码:
@import "./fontawesome/fontawesome.wxss";
@import "./fontawesome/solid.wxss";

四、至此结束

现在,已经可以在任意 wxml 文件内使用 Font Awesome 图标了。例:

 <text class="fas fa-question"></text>
上一篇下一篇

猜你喜欢

热点阅读