weapp fontawesome component

字体下载 2025-07-31

weapp-fontawesome-component

微信小程序的 fa 图标模块,项目使用 fa 的 4.x 版本

安装说明

  1. 将 src/components 中的文件复制到项目中的 components 路径下.

加载说明

  1. 在需要引入的 页面(Page) 或者 模块(Components) 中引入这个模块
    1. 编辑页面/模块中的 json 文件
    2. 在 json 文件中添加如下内容
    /includes/fa/index", ... } ... }">
    {
      ...
      "usingComponents": {
        ...
        "fa": "..//includes/fa/index",
        ...
      }
      ...
    }

用法

基本用法和fa 用法类似,下面列出一些用法是之前项目开发时候用到的,确认可以使用,其他用法请自行测试。

基本图标

在 wxml 中使用 fa 标签:Example:

">
<fa icon="fa fa-home">fa>

大图标

fa-lg fa-2x fa-3x fa-4x fa-5x">
<fa icon="fa fa-home fa-lg">fa> fa-lg
<fa icon="fa fa-home fa-2x">fa> fa-2x
<fa icon="fa fa-home fa-3x">fa> fa-3x
<fa icon="fa fa-home fa-4x">fa> fa-4x
<fa icon="fa fa-home fa-5x">fa> fa-5x

堆叠图标

">
<fa icon="fa-stack fa-lg">
    <fa icon="fa fa-user-o fa-stack-1x">fa>
    <fa icon="fa fa-circle-thin fa-2x fa-stack-2x">fa>
fa>

图标颜色

组件集成了一些bootstrap 4 的默认颜色,可以直接调用

">
<fa icon="fa fa-ban text-danger">fa>

参考来源

80percent/wechat-weapp-font-awesome

southyou/wxcss-fontawesome

下载源码

通过命令行克隆项目:

git clone https://github.com/flyw/weapp-fontawesome-component.git