如何使用 SASS 制作通用的 Font Awesome mixin

Question

我正在尝试创建一个 SASS 混合宏，它允许我仅指定混合宏调用和 Unicode 编号。这种情况适用于图标显示在项目之前的列表项目。

我的 SASS mixin 看起来像这样。我添加了两个 font-family 选项以包含所有内容。如果这不是一个好主意，也许我会做一个 if 声明或其他东西：

=faIconBefore($unicode) 
  display: inline-block
  content: "$unicode"
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands"
  font-size: 0.9em
  font-style: normal
  font-weight: 900
  font-variant: normal
  color: $colorPrime
  text-rendering: auto
  -webkit-font-smoothing: antialiased
  margin-right: 0.25em

这可以在代码中用于下载图标，如下所示：

+faIconBefore('f019')

我也试过在内容行中使用这个：

content: "\#{$unicode}"

理想情况下，这只会添加我想要的图标，但结果却得到了 $unicode item.pdf。

将 Unicode 数字硬编码到 SASS 文件时工作正常，但我似乎无法使这部分工作。

更新：

我试图组合一个 fiddle，但它根本无法使用字体。

Answer 1

嗯，这看起来行不通。也许使用 @extend 命令，但在 mixin 中更改 content 样式以删除单引号和斜杠 ('\') 并将斜杠添加到样式表中的 Unicode 编号似乎可以解决此问题。这是我的新代码：

// Adding a Font Awesome icon before an element, specifying the unicode number - Usage: +faIconBefore('\f019')
=faIconBefore($unicode)
  display: inline-block
  content: $unicode
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands"
  font-size: 0.9em
  font-style: normal
  font-weight: 900
  font-variant: normal
  color: $colorPrime
  text-rendering: auto
  -webkit-font-smoothing: antialiased
  margin-right: 0.25em

以及用法：

+faIconBefore('\f019')

如果有人知道它如何使用一些改进，请告诉我。

谢谢

如何使用 SASS 制作通用的 Font Awesome mixin

How to make a univeral Font Awesome mixin with SASS

unicode

fonts

sass

mixins

font-awesome