跳到内容
Font Awesome 文档
欢迎来到 Web Awesome，最棒的开源网络组件库。
今天预订！

自定义图标

Font Awesome 图标可以使用您自己的 CSS 进行更进一步的自定义。我们甚至在样式工具包选项中添加了 CSS 自定义属性。

使用 CSS 自定义属性进行自定义

我们的样式工具包提供了许多实用程序，包括调整大小、旋转、堆叠和动画图标。使用下面 CSS 自定义属性，我们添加了一些简单的方法来自定义样式工具包功能的各个方面。

CSS 自定义属性详细信息可接受的值
--fa-style-family设置 Font Awesome 图标系列"Font Awesome 6 Free"
"Font Awesome 6 Pro"
"Font Awesome 6 Duotone"
"Font Awesome 6 Brands"
"Font Awesome 6 Sharp"
--fa-style设置 Font Awesome 图标样式任何有效的 Font Awesome 样式权重
--fa-display设置图标的显示任何有效的 CSS display 值
--fa-inverse设置反向图标的颜色任何有效的 CSS color 值


列表中的图标
--fa-li-margin设置图标周围的边距任何有效的 CSS margin 值
--fa-li-width设置图标的宽度任何有效的 CSS width 值


旋转图标
--fa-rotate-angle设置 .fa-rotate-by 的旋转角度任何有效的 CSS transform 旋转 值


动画图标
--fa-animation-delay设置动画的初始延迟任何有效的 CSS animation-direction 值
--fa-animation-direction设置动画的方向任何有效的 CSS animation-direction 值
--fa-animation-duration设置动画的持续时间任何有效的 CSS animation-duration 值
--fa-animation-iteration-count设置动画的迭代次数任何有效的 CSS animation-iteration-count 值
--fa-animation-timing设置动画如何在帧中进行任何有效的 CSS animation-timing-function 值
--fa-beat-scale设置 fa-beat 图标将缩放到的最大值任何有效的 CSS 数字 值
--fa-fade-opacity设置 fa-fade 图标将淡入淡出的最低不透明度值0 1.0
--fa-beat-fade-opacity设置 fa-beat-fade 图标将淡入淡出到的最低不透明度值0 1.0
--fa-beat-fade-scale设置图标将缩放到的最大值设置 fa-beat-fade 图标将缩放到的最大值
--fa-flip-x设置 fa-flip 图标的表示旋转轴的向量的 x 坐标任何有效的 CSS number 值，介于 0 和 1 之间
--fa-flip-y设置 fa-flip 图标的表示旋转轴的向量的 y 坐标任何有效的 CSS number 值，介于 0 和 1 之间
--fa-flip-z设置 fa-flip 图标的表示旋转轴的向量的 z 坐标任何有效的 CSS number 值，介于 0 和 1 之间
--fa-flip-angle设置 fa-flip 图标的旋转角度。正角度表示顺时针旋转，负角度表示逆时针旋转。任何有效的 CSS 角度 值


带边框的图标
--fa-border-color设置边框颜色任何有效的 CSS border-color 值
--fa-border-padding设置图标周围的填充任何有效的 CSS padding 值
--fa-border-radius设置边框半径任何有效的 CSS border-radius 值
--fa-border-style设置边框样式任何有效的 CSS border-style 值
--fa-border-width设置边框宽度任何有效的 CSS border-width 值


弹跳图标
--fa-bounce-rebound设置图标在跳跃后着陆时的回弹量任何有效的 CSS 数字 值
--fa-bounce-height设置图标弹跳时跳跃到的最大高度任何有效的 CSS 数字 值
--fa-bounce-start-scale-x设置图标开始弹跳时的水平扭曲（“挤压”）任何有效的 CSS 数字 值
--fa-bounce-start-scale-y设置图标开始弹跳时的垂直扭曲（“挤压”）任何有效的 CSS 数字 值
--fa-bounce-jump-scale-x设置图标跳跃顶部时的水平扭曲（“挤压”）任何有效的 CSS 数字 值
--fa-bounce-jump-scale-y设置图标跳跃顶部时的垂直扭曲（“挤压”）任何有效的 CSS 数字 值
--fa-bounce-land-scale-x设置图标在跳跃后着陆时的水平扭曲（“挤压”）任何有效的 CSS 数字 值
--fa-bounce-land-scale-y设置图标在跳跃后着陆时的垂直扭曲（“挤压”）任何有效的 CSS 数字 值


拉伸图标
--fa-pull-margin设置图标周围的边距任何有效的 CSS margin 值


堆叠图标
--fa-stack-z-index设置堆叠图标的 z 索引任何有效的 CSS z-index 值
--fa-inverse设置反向堆叠图标的颜色任何有效的 CSS color 值


双色调图标
--fa-primary-color设置主层颜色任何有效的 CSS color 值
--fa-primary-opacity设置主层不透明度0 1.0
--fa-secondary-color设置次层颜色任何有效的 CSS color 值
--fa-secondary-opacity设置次层不透明度0 1.0


分层文本和计数器
--fa-counter-background-color设置 fa-layers-counter 的背景颜色任何有效的 CSS color 值
--fa-counter-border-radius设置 fa-layers-counter 的边框半径任何有效的 CSS border-radius 值
--fa-counter-line-height设置 fa-layers-counter 的行高任何有效的 CSS line-height 值
--fa-counter-max-width设置 fa-layers-counter 的最大宽度任何有效的 CSS width 值
--fa-counter-min-width设置 fa-layers-counter 的最小宽度任何有效的 CSS width 值
--fa-counter-padding设置 fa-layers-counter 的填充任何有效的 CSS padding 值
--fa-counter-scale设置 fa-layers-counter 放大/缩小的比例任何有效的 CSS transform 缩放 值
--fa-top设置 .fa-layers-top-left 或 layers-top-right 的顶部偏移量任何有效的 CSS top 值
--fa-right设置 .fa-layers-top-right 或 layers-bottom-right 的右侧偏移量任何有效的 CSS right 值
--fa-bottom设置 .fa-layers-bottom-left 或 layers-bottom-right 的底部偏移量任何有效的 CSS bottom 值
--fa-left设置 .fa-layers-top-left 或 layers-bottom-left 的左侧偏移量任何有效的 CSS left 值
--fa-inverse设置反向堆叠图标的颜色任何有效的 CSS color 值


伪元素
--fa-font-solid在伪元素自定义 CSS 规则中设置 font 属性以使用实心样式 (font-family 和 font-weight)
--fa-font-regular在伪元素自定义 CSS 规则中设置 font 属性以使用常规样式 (font-family 和 font-weight)
--fa-font-light在伪元素自定义 CSS 规则中设置 font 属性以使用实心样式 (font-family 和 font-weight)
--fa-font-thin在伪元素自定义 CSS 规则中设置 font 属性以使用细体样式 (font-family 和 font-weight)
--fa-font-duotone在伪元素自定义 CSS 规则中设置 font 属性以使用双色调样式 (font-family 和 font-weight)
--fa-font-brands在伪元素自定义 CSS 规则中设置 font 属性以使用品牌样式 (font-family 和 font-weight)
--fa-font-sharp-solid在伪元素自定义 CSS 规则中，将 font 属性设置为使用 sharp 字体系列和 solid 风格 (font-family 和 font-weight)
--fa-font-sharp-regular在伪元素自定义 CSS 规则中，将 font 属性设置为使用 sharp 字体系列和 regular 风格 (font-family 和 font-weight)
--fa-font-sharp-light在伪元素自定义 CSS 规则中，将 font 属性设置为使用 sharp 字体系列和 light 风格 (font-family 和 font-weight)
--fa-font-sharp-thin在伪元素自定义 CSS 规则中，将 font 属性设置为使用 sharp 字体系列和 thin 风格 (font-family 和 font-weight)


快速样式切换
--fa-style-family-classic在 Pro 项目中，将 font-family 设置为 "Font Awesome 6 Pro")
在 Free 项目中，将 font-family 设置为 "Font Awesome 6 Free"。
--fa-style-family-sharp在 Pro 项目中，将 font-family 设置为 "Font Awesome 6 Sharp")

在项目中使用自定义属性

CSS 自定义属性 对大多数人来说仍然是一个比较新的概念。以下是一些在项目中定义它们的方法…

使用 CSS :root 设置属性

您可以在 CSS :root 伪类 级别定义自定义属性。这将使所有使用样式工具包功能的图标默认继承这些属性。

<!-- by default, everything will be in v6's Classic regular style and in the holiday spirit -->
<style>
  :root {
    --fa-style-family: 'Font Awesome 6 Pro';
    --fa-style: 400;
    --fa-border-color: red;
    --fa-primary-color: green;
    --fa-secondary-color: red;
  }
</style>

使用基于项目的 CSS 规则设置属性

您也可以在项目的 CSS 中设置自定义属性，例如在页面的 <head> 中或在单独的样式表中。这些属性将只作用于与您包含它们的规则选择器匹配的元素。

<style>
  /* setting a decorative icon dropcap before a block of text */
  .ye-olde-icon-dropcap {
    --fa-border-color: WhiteSmoke;
    --fa-border-padding: 2em;
    --fa-border-radius: 0.25em;
    --fa-pull-margin: 2em;


    font-size: 8em;
  }


  /* playing DJ with fa-record-vinyl */
  .track-quick-spin {
    --fa-spin-duration: 0.25s;
    --fa-spin-iteration-count: 1;
    --fa-spin-timing: ease-out;
  }


  .track-vocals {
    --fa-spin-duration: 10s;
    --fa-spin-timing: ease-in-out;
    --fa-spin-iteration-count: 2;
  }


  .track-dope-hook {
    --fa-spin-duration: 10s;
    --fa-spin-iteration-count: 10;
  }


  /* Mo' Malfoy! Mo' Malfoy! Mo' Malfoy! */
  .theme-slytherin {
    --fa-primary-color: darkgreen;
    --fa-secondary-color: silver;
  }


  /* extra sharp flavor */
  .theme-sharp {
    font: var(--fa-font-sharp-solid);
  }
</style>

使用内联样式设置属性

这些文档中的许多示例使用内联样式来定义 CSS 自定义属性，方法是在元素中添加 style 属性。这最适合一次性使用或非常自定义的双色调图标，您无需在系统级别更改它们。

<!-- rotating an icon -->
<i class="fa-solid fa-bomb fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>


<!-- using inline styles to define duotone icon custom properties -->
<i class="fa-duotone fa-crow" style="--fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>

使用 CSS 添加您自己的自定义样式

您可以使用 CSS 控制的所有内容都可以在这里使用，从颜色到显示到对齐方式。我们建议您在 CSS 中以两种不同的方式定位图标。您也可以在项目代码中添加自己的 CSS 规则，为 Font Awesome 图标添加自定义样式。

样式案例推荐选择器
自定义所有图标的样式向所有图标添加一致的自定义类 (例如 .icon、.[projectprefix]-icon 或 .fa-icon)

您也可以使用 样式类 来标识正在使用的图标样式
.fa-solid { ... }
.fa-regular { ... }
.fa-light { ... }
.fa-thin { ... }
.fa-duotone { ... }
.fa-brands { ... }
.fa-sharp-solid { ... }
自定义特定图标的样式使用单个图标名称，以 .fa- 为前缀
.fa-user { ... }
.fa-font-awesome { ... }

以下是如何使用这些选择器为 Font Awesome 图标添加自定义颜色的简单示例

<!-- reference your copy of Font Awesome in the head -->
<head>
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet" />
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
  <link href="/your-path-to-fontawesome/css/sharp-solid.css" rel="stylesheet" />
</head>

<!-- Add some style -->
<style>
  /* custom styling for all icons */
  .fa-solid,
  .fa-brands,
  .fa-sharp-solid {
    background-color: papayawhip;
    border-radius: 0.2em;
    padding: 0.3em;
  }


  /* custom styling for specific icons */
  .fa-fish {
    color: salmon;
  }


  .fa-frog {
    color: green;
  }


  .fa-user-ninja.vanished {
    opacity: 0.2;
  }


  .fa-facebook {
    color: rgb(59, 91, 152);
  }
</style>


<!-- Add some Icons -->
<body>
  <i class="fa-solid fa-fish"></i>
  <i class="fa-solid fa-frog"></i>
  <i class="fa-solid fa-user-ninja vanished"></i>
  <i class="fa-brands fa-facebook"></i>
  <i class="fa-sharp fa-solid fa-fish"></i>
</body>