Font Awesome: Duotone появляется только наполовину - PullRequest
Новая
       20

Font Awesome: Duotone появляется только наполовину

2 голосов
/ 24 октября 2019

У меня есть лицензия Font Awesome Pro. Большинство значков отображаются без проблем, как вы можете видеть здесь: https://ruthannereid.com

В частности, я использую значок книг Duotone в моем меню (скриншот): https://i.imgur.com/n3xoiDR.jpg

Iхочу вот эту иконку (скриншот): https://i.imgur.com/8jXfyAQ.jpg

Странно, когда я добавляю семейство шрифтов: «Font Awesome 5 Duotone» в CSS, иконка эффектно ломается (скриншот): https://i.imgur.com/GUK4yIq.jpg

Я бы хотел помочь с этим. Я не знаю, нужно ли мне делать трюк с PHP или что-то еще, но я готов попробовать любой код (надеюсь CSS).

PS Я пытался добавить "fa" и"Увлекать" спецификации CSS для сайта :: before icon вручную, но это не исправило это.

Текущий CSS: 

.error404 .site-inner::before,
.page .site-inner::before,
.single .site-inner::before {
content: "\f5db" !important;
    font-family: "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
    background: none !important;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
   font-size: 80px;
    color: var(--fa-primary-color,inherit);
    opacity: 1;
    opacity: var(--fa-primary-opacity,1);
}

1 Ответ

0 голосов
/ 25 октября 2019

При использовании подхода Unicode, а не метода имени класса, есть несколько проблем, и я не уверен, каким образом вы хотите работать. Если вы используете шрифт Font Awesome 5 Pro, а не шрифт Font Awesome 5 Duotone, вам нужно обязательно указать основной и дополнительный юникоды. В настоящий момент вы видите только половину значка, потому что вы указали только основной слой значка.

Если вы посмотрите на страницу с книгами, вы увидите, что есть второй юникод 10f5db, которыйЯ выделил на скриншоте ниже:

Books page screenshot

Чтобы также отобразить дополнительный слой, вы можете добавить следующий код :after рядом с вашим исходным :beforeкод 

.error404 .site-inner::after,
.page .site-inner::after,
.single .site-inner::after{
    content: "\10f5db" !important;
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
    background: none !important;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-size: 80px;
    color: var(--fa-primary-color,#fff);
    opacity: 1;
    opacity: var(--fa-primary-opacity,1);
}

Я не тестировал это решение, потому что наша учетная запись Pro не имеет SO в белом списке, но уверен, что он должен работать. Если этого не произойдет, пожалуйста, напишите мне, и я протестирую его на одном из наших доменов, занесенных в белый список.

Если вы используете шрифт Font Awesome 5 Duotone, вы также можете указать --fa-secondary-colorкак --fa-primary-color.

...