时间戳

首页 > 解决方案 > 如何使用 SASS 制作一个通用的 Font Awesome mixin

unicode - 如何使用 SASS 制作一个通用的 Font Awesome mixin

问题描述

我正在尝试制作一个 SASS mixin，让我只指定 mixin 调用和 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，但它根本无法与字体一起使用。

标签： unicodesassfontsfont-awesomemixins

解决方案

好吧，看起来那是行不通的。也许使用该@extend命令，但更改contentmixin 中的样式以删除单引号和斜杠（'\'）并将斜杠添加到样式表中的 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')

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

谢谢

推荐阅读