Font Awesome 5 псевдоэлементы

Аватар пользователя Ilya_ Ilya_ 29 июля 2018 в 21:30

Здравствуйте. Обновил шрифты до Font Awesome 5.

В версии 4.7 у каждой иконки был свой юникод. Например звездочка с заливкой - f005, звездочка без заливки - f006.

В версии 5 звездочка с заливкой - f005, звездочка без заливки - тоже f005.

Как в таком случае использовать псевдоэлементы?

:before {
  content:"\f005";

Если мне для модуля fivestar нужны разные звездочки?
<i class="far fa-star"></i> не подходит, потому что в виджете через псевдоэлементы сделано и работает на версии 4.7.

4.7:
https://fontawesome.com/v4.7.0/icon/star
https://fontawesome.com/v4.7.0/icon/star-o

5:
https://fontawesome.com/icons/star?style=solid
https://fontawesome.com/icons/star?style=regular

Лучший ответ

Аватар пользователя OldWarrior OldWarrior 29 июля 2018 в 23:52
2

Ilya_ wrote:

f005 это одновременно и закрашенная звездочка и пустая

А, вы про это.
В 5-й версии это действительно так, но отличие в вариантах начертания шрифта.
Для закрашенных иконок нужно ставить font-weight: bold - они находятся именно в полужирном начертании шрифта. Либо указывать font-family для полужирного начертания (опять же смотрите исходный CSS шрифта).

В полной PRO-версии, кстати, есть ещё и light-вариант.

Комментарии

Аватар пользователя OldWarrior OldWarrior 29 июля 2018 в 21:52

Должно работать по unicode-кодам (\f005 и т.д.). У меня в 5-й версии вот это всё работает:

Ilya_ wrote:

:before {
  content:"\f005";

Но имя шрифта иконок изменилось в 5-й версии, это тоже нужно учитывать.
По-моему, теперь называется Font Awesome 5 Free или как-то так. Не помню точно, потому что у меня Pro-версия шрифта.
Уточните название, открыв css-файлы, поставляемые вместе со шрифтом.

Аватар пользователя Ilya_ Ilya_ 29 июля 2018 в 22:32

OldWarrior wrote:

Должно работать по unicode-кодам (\f005 и т.д.). У меня в 5-й версии вот это всё работает:
Ilya_ написал:

:before {

  content:"\f005";

Но имя шрифта иконок изменилось в 5-й версии, это тоже нужно учитывать.

По-моему, теперь называется Font Awesome 5 Free или как-то так. Не помню точно, потому что у меня Pro-версия шрифта.

Уточните название, открыв css-файлы, поставляемые вместе со шрифтом.


Да там Font Awesome 5 Free, но все равно. f005 это одновременно и закрашенная звездочка и пустая. Они имеют одинаковый unicode. А в версии 4.7 разный

Аватар пользователя OldWarrior OldWarrior 29 июля 2018 в 23:52
2

Ilya_ wrote:

f005 это одновременно и закрашенная звездочка и пустая

А, вы про это.
В 5-й версии это действительно так, но отличие в вариантах начертания шрифта.
Для закрашенных иконок нужно ставить font-weight: bold - они находятся именно в полужирном начертании шрифта. Либо указывать font-family для полужирного начертания (опять же смотрите исходный CSS шрифта).

В полной PRO-версии, кстати, есть ещё и light-вариант.

Аватар пользователя Ilya_ Ilya_ 30 июля 2018 в 21:12

OldWarrior wrote:

А, вы про это.

В 5-й версии это действительно так, но отличие в вариантах начертания шрифта.

Для закрашенных иконок нужно ставить font-weight: bold - они находятся именно в полужирном начертании шрифта. Либо указывать font-family для полужирного начертания (опять же смотрите исходный CSS шрифта).
В полной PRO-версии, кстати, есть ещё и light-вариант.

Спасибо, сейчас буду пробовать