Less

在你的项目中使用 Less 作为 CSS 预处理器？ 没问题，如果您希望将我们的样式导入到您的工作流程中，Font Awesome 有一个 Less 版本（没有什么比这更重要的了！）

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

开始之前 确保你：

• 下载 Font Awesome v5 特定于 Web 的文件并将它们放在手边。
• 使用 Less 设置一个项目。

#这是如何组织的？

以下是专门为 Less 制作的 mixin 和文件的一些详细信息。

#为你的编译添加 Font Awesome

将 less 文件夹复制到您的项目中。 然后将整个 webfonts 文件夹复制到提供静态文件的项目中。

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

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

通过在主 Less 文件中添加 @import "less/fontawesome.less" 来导入 Font Awesome。 此外，在您的主 Less 文件中导入一种或多种样式 @import "less/solid.less" 。 编译您的代码并开始在您的项目中使用这些新图标！

#注意那些文件路径！

你可能已经知道这一点，但我们似乎总是忘记它。 字体路径是相对于你编译的 CSS 目录。 确保将 webfonts 目录放在相对于最终 CSS 所在位置的位置。

#使用我们的混合器

你可以使用 .fa-icon 将事物设置为图标。 使用.fas以 Solid 样式创建图标。 导入其他样式以使用其他前缀。 使用变量来更容易地包含内容值。

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

.user {
  .fa-icon;
  .fas;

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

.twitter {
  .fa-icon;
  .fab;

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