美文网首页
微信小程序 引用 Font Awesome

微信小程序 引用 Font Awesome

作者: MrTricker | 来源:发表于2019-02-15 16:58 被阅读0次

    一、从官网下载 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>
    

    相关文章

      网友评论

          本文标题:微信小程序 引用 Font Awesome

          本文链接:https://www.haomeiwen.com/subject/uwqmeqtx.html