Как сделать универсальный миксин Font Awesome с помощью SASS - PullRequest
Новая
       61

Как сделать универсальный миксин Font Awesome с помощью SASS

0 голосов
/ 02 июля 2019

Я пытаюсь создать миксин SASS, который позволяет мне указать только миксин-вызов и номер Unicode. Этот случай относится к элементам списка, где значок будет отображаться перед элементом.

Мой SASS миксин выглядит так. Я добавил оба варианта 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, но я не могу заставить эту часть работать.

ОБНОВЛЕНИЕ:

Я пытался собрать скрипку , но он не работал со шрифтом.

1 Ответ

0 голосов
/ 02 июля 2019

Ну, похоже, это просто не работает.Возможно, с помощью команды @extend, но изменение стиля content в миксине для удаления одинарных кавычек и косой черты ('\') и добавление косой черты к номеру Юникода в таблице стилей, казалось, исправило это.Вот мой новый код: 

// 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')

Если кто-нибудь знает, как можно использовать некоторые уточнения, дайте мне знать.

Спасибо

...