如何使用 SASS 制作一个通用的 Font Awesome mixin答案

【问题标题】：How to make a univeral Font Awesome mixin with SASS如何使用 SASS 制作一个通用的 Font Awesome mixin
【发布时间】：2019-07-03 04:08:11
【问题描述】：

我正在尝试制作一个 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 放在一起，但它根本无法与字体一起使用。

【问题讨论】：

标签： unicode sass fonts font-awesome mixins

【解决方案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')

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

谢谢

【讨论】：