跳至内容
Font Awesome 文档
向 Web Awesome 问好，这是一个规模最大、最好的开源 Web 组件库。
今天预订！

Less

在您的项目中使用 Less 作为 CSS 预处理器？没问题，如果您希望将我们的样式导入到您的工作流程中，Font Awesome 也有一个 Less 版本。

我们将介绍如何从目录中获取所有必要文件、将 Font Awesome 添加到您的编译中、用于轻松引用图标的工具等等！

获取文件

您将在 Font Awesome 下载 的 fontawesome6 目录中找到所有需要的内容。以下是专门为 Less 创建的文件列表。您可以将它们全部添加到您的项目中，也可以只选择您需要的文件。

文件它们的功能
fontawesome.lessFont Awesome 主要编译
brands.less品牌图标样式
solid.less实心图标样式
regular.less常规图标样式
light.less淡色图标样式
thin.less细线图标样式
sharp-solid.less锐利实心图标样式
sharp-regular.less锐利常规图标样式
sharp-light.less锐利淡色图标样式
sharp-thin.less锐利细线图标样式
duotone.less双色调 图标样式
_variables.less定义在整个样式中使用的变量
_mixins.less在整个样式/图标定义中使用的实用程序
_core.less基本图标引用类语法和定义
_duotone-icons.less双色调图标类
_sizing.less图标大小 支持样式
_fixed-width.less固定宽度 图标支持样式
_list.less列表中的图标 支持样式
_bordered-pulled.less带边框和拉伸的 图标支持样式
_animated.less动画 图标支持样式
_rotated-flipped.less旋转 图标支持样式
_stacked.less叠放 图标支持样式
_icons.less所有图标定义
_screen-reader.less屏幕阅读器特定和 可访问性 支持样式
_custom-icons.less包括自定义图标，在 工具包下载 中（如果您正在使用一个）

将 Font Awesome 添加到您的编译中

将 less 文件夹复制到您的项目中。然后将整个 webfonts 文件夹复制到您的项目中，即您的静态文件所在的目录。

打开您的项目的 less/variables.less 并编辑 @fa-font-path 变量，使其指向您放置 webfonts 文件夹的位置。

@fa-font-path: '../webfonts';

在您的主要 Less 编译文件中，通过添加核心样式文件 @import "less/fontawesome.less" 导入 Font Awesome。然后导入一种或多种样式。

// importing core styling file
@import './fontawesome/less/fontawesome.less';


@import './fontawesome/less/solid.less';
@import './fontawesome/less/brands.less';

如果您想使用更多样式，请添加更多样式导入

// importing core styling file
@import './fontawesome/less/fontawesome.less';


// our project needs Classic Solid, Brands, and Sharp Solid
@import './fontawesome/less/solid.less';
@import './fontawesome/less/brands.less';
@import './fontawesome/less/sharp-solid.less';

使用双色调图标

如果一个项目使用双色调图标，您需要 @import 两个独立的文件。

// importing core styling file
@import './fontawesome/less/fontawesome.less';


// our project needs Duotone - which requires both of the following files
@import './fontawesome/less/duotone.less';
@import './fontawesome/less/\_duotone-icons.less';

使用已下载的工具包

从版本 6.4 开始，您现在可以下载一个工具包，并像使用 Font Awesome 一样进行编译和自行托管！要下载您的工具包，确保“设置”中的工具包版本设置为“最新 6.x”，或者如果您选择了特定版本，它需要至少为 6.4。然后，从工具包的“设置”选项卡中，您将看到下载选项。您的工具包下载将包含所有 上面列出的 Less 文件。

已下载工具包中的自定义图标

如果您在工具包中包含自定义图标，它们将作为工具包下载中的附加文件包含。

文件路径文件的功能
/webfonts/custom-icons.woff
/webfonts/custom-icons.ttf		自定义图标字体，以 WOFF2 和 TTF 格式提供
/less/custom-icons.lessLess 预处理器部分，使用 Web 字体处理自定义图标的显示

以下是一个简单的示例，它遵循 上面列出的编译步骤，以及自定义图标

// importing core styling file
@import './fontawesome/less/fontawesome.less';


//  importing Font Awesome styles
@import './fontawesome/less/solid.less';
@import './fontawesome/less/brands.less';


// importing a kit's custom icons
@import './fontawesome/less/custom-icons.less';

添加图标

在添加了上面的导入并将包含 Font Awesome 的编译后的 CSS 设置好并在 项目中引用 之后，您就可以 将图标添加到项目的 HTML 中。

以下是如何使用编译后的和自行托管的 CSS 引用图标的示例

<head>
  <!--load your compiled CSS (including Font Awesome) -->
  <link
    href="/your-path-to-your-compiled-css-including-fontawesome/file.css"
    rel="stylesheet"
  />
</head>
<body>
  <!-- This example uses <i> element with:
  1. the `fa-solid` style class for solid style
  2. the `user` icon with the `fa-` prefix -->
  <i class="fa-solid fa-user"></i>


  <!-- Or you can use a <span> element, with classes applied in the same way -->


  <span class="fa-solid fa-user"></span>
</body>

自定义基于 Less 的 CSS 规则

如果您想使用我们的 Less 混合器 或实用程序，您可以利用我们的 CSS 伪元素 方法将图标添加到您的项目中。此方法在无法更改项目上的 HTML 时也很有用。

使用我们的 .fa-icon- 和 .fa-family- 样式混合器，您可以轻松地使用特定于您的项目的 CSS 选择器生成自定义 CSS 伪元素规则。

// Solid style of user
.user {
  .fa-icon-solid(@fa-var-user);
}


// Regular style of triangle-exclamation
.triangle-exclamation {
  .fa-icon-regular(@fa-var-triangle-exclamation);
}


// Light style of newspaper
.newspaper {
  .fa-icon-light(@fa-var-newspaper);
}


// Thin style of paintbrush-fine
.paintbrush-fine {
  .fa-icon-thin(@fa-var-paintbrush-fine);
}


// Duotone style of camera-retro
.camera-retro {
  .fa-icon-duotone(@fa-var-camera-retro);
}


// Twitter brand icon
.twitter {
  .fa-icon-brands(@fa-var-twitter);
}


// Sharp Solid style of trash
.trash {
  .fa-icon-solid(@fa-var-trash);
  .fa-family-sharp(); // define Sharp family
}


// Sharp Regular style of trash
.trash {
  .fa-icon-regular(@fa-var-trash);
  .fa-family-sharp(); // define Sharp family
}


// Classic Solid style of trash
.trash {
  .fa-icon-solid(@fa-var-trash);
  .fa-family-classic(); // explicity setting Classic family (optional since this is Font Awesome's default)
}

样式混合器

要使用样式混合器，您需要

  1. 选择适合您所需样式的混合器。
  2. 传入要显示的图标的 Less 变量。
样式混合器可用性渲染的样式
fa-icon-brands()免费计划品牌
fa-icon-solid()免费计划实心
fa-icon-regular()仅限专业版常规
fa-icon-light()仅限专业版亮色
fa-icon-thin()仅限专业版细线
fa-icon-duotone()仅限专业版双色调

系列混合器

如果您使用我们的混合器在特定系列中渲染图标，例如我们的 锐利系列样式，您需要引用正确的系列混合器（例如 .fa-family-sharp）。经典是我们默认的样式系列，因此不需要使用系列混合器进行设置，除非您试图显式设置以覆盖之前的系列。

系列混合器可用性渲染的样式
fa-family-classic()免费计划与其他样式混合器一起使用时 经典
fa-family-sharp()仅限专业版与其他样式混合器一起使用时 锐利

更手动的方式定制 CSS

如果您希望在编写样式规则时采用更可定制的方式，我们已经提供了样式混合器中使用的实用程序，以获得相同的渲染结果。

要编写手动规则，您需要

  1. 通过添加 .fa-icon; 获取图标的核心设置样式。
  2. 使用 .fa-solid; 包含以实心样式渲染图标的样式（其他样式的语法类似）。
  3. 使用 .fa-classic; 或 .fa-sharp; 包含以特定系列渲染图标的样式（经典是默认设置）。
  4. 在 ::before 伪元素规则中，使用图标变量名称，使包含图标的 Unicode 值更加容易。这与 通过伪元素添加图标 的语法类似。
// Solid style of user
.user {
  .fa-icon;
  .fa-solid;


  &::before {
    content: @fa-var-user;
  }
}


// Regular style of triangle-exclamation
.triangle-exclamation {
  .fa-icon;
  .fa-regular;


  &::before {
    content: @fa-var-triangle-exclamation;
  }
}


// Light style of newspaper
.newspaper {
  .fa-icon;
  .fa-light;


  &::before {
    content: @fa-var-newspaper;
  }
}


// Thin style of paintbrush-fine
.paintbrush-fine {
  .fa-icon;
  .fa-thin;


  &::before {
    content: @fa-var-paintbrush-fine;
  }
}


// Duotone style of camera-retro
.camera-retro {
  .fa-icon;
  .fa-duotone;


  &::before {
    content: @fa-var-camera-retro;
  }
}


// Twitter brand icon
.twitter {
  .fa-icon;
  .fa-brands;


  &::before {
    content: @fa-var-twitter;
  }
}


// Sharp Solid style of trash
.trash {
  .fa-icon;
  .fa-solid;
  .fa-sharp; // define Sharp family


  &::before {
    content: @fa-var-trash;
  }
}


// Classic Solid style of trash
.trash {
  .fa-icon;
  .fa-solid;
  .fa-classic; // explicity setting Classic family (optional since this is Font Awesome's default)


  &::before {
    content: @fa-var-trash;
  }
}

包含的混合器

它的作用
.fa-icon()一个包含所有图标基本样式设置的混合器（减去图标的样式和特定名称/Unicode）编译
.fa-icon-solid()
.fa-icon-regular()
.fa-icon-light()
.fa-icon-thin()
.fa-icon-duotone()
.fa-icon-brands()		包含所有图标基本样式设置以及用于渲染图标的特定样式的混入。
.fa-family-sharp()
.fa-family-classic()		与 .fa-icon- 样式混入结合使用时，定义要使用的样式家族的混入。
.fa-size()一个计算 相对大小比例 的字体大小和垂直对齐的混入。
.fa-sr-only()一个将包含图标文本等效项的元素视觉上隐藏，同时保持其可供辅助技术访问的混入。
.fa-sr-only-focusable()与 .fa-sr-only() 结合使用的混入，用于在元素获得焦点时（例如，由仅使用键盘的用户）再次显示该元素。

变量

Font Awesome 的 Less 版本还利用了多个 Less 变量，允许更轻松地设置和自定义我们的样式工具包。

变量它的作用
@fa-css-prefix设置所有样式工具包 CSS 规则（例如 fa-lg）+ 图标引用类（例如 fa-user）使用的前缀（默认设置为 fa）。
@fa-style设置默认图标样式（使用 @font-face 权重）。
@fa-style-family设置使用的默认 font-family。
@fa-display设置渲染图标的 display 属性（默认设置为 inline-block）。
@fa-font-display设置 Font Awesome 图标字体的 font-display 属性。
@fa-fw-width设置所有 固定宽度 图标的 width 属性。
@fa-inverse设置 .fa-inverse 的 color 属性。
@fa-border-color设置 带边框图标 中使用的 border-color 属性。
@fa-border-padding设置 带边框图标 中使用的 padding 属性。
@fa-border-radius设置 带边框图标 中使用的 border-radius 属性。
@fa-border-style设置 带边框图标 中使用的 border-style 属性。
@fa-border-width设置 带边框图标 中使用的 border-width 属性。
@fa-li-width设置在 列表中 设置图标样式时，fa-li 元素的 width 属性。
@fa-li-margin设置在 列表中 设置图标样式时，fa-li 元素的 margin-right 属性。
@fa-pull-margin设置 拉伸图标 图标的 margin-left/margin-right 属性。
@fa-primary-opacity设置 双色调 图标主层的 不透明度。
@fa-secondary-opacity设置 双色调 图标副层的 不透明度。
@fa-size-scale-base设置所有其他 相对大小 步长所基于的基本步长大小。
@fa-size-scale-2xs使用 .fa-2xs 相对调整图标大小 时设置的步长大小。
@fa-size-scale-xs使用 .fa-xs 相对调整图标大小 时设置的步长大小。
@fa-size-scale-sm使用 .fa-sm 相对调整图标大小 时设置的步长大小。
@fa-size-scale-lg使用 .fa-lg 相对调整图标大小 时设置的步长大小。
@fa-size-scale-xl使用 .fa-xl 相对调整图标大小 时设置的步长大小。
@fa-size-scale-2xl使用 .fa-2xl 相对调整图标大小 时设置的步长大小。
@fa-stack-vertical-align设置 堆叠图标 的 垂直对齐 属性。
@fa-stack-width设置 堆叠图标 的 宽度 属性。
@fa-stack-z-index设置 堆叠图标 的 z-index 属性。
@fa-font-path设置 Font Awesome 的 webfont 文件夹和资源的位置。