Chrome правильно отображает значок шрифта на одной части страницы, но не на другой - PullRequest
Новая
       37

Chrome правильно отображает значок шрифта на одной части страницы, но не на другой

0 голосов
/ 15 апреля 2020

У меня самая странная проблема, и я не могу ее отследить. Только в Chrome в заголовке этой страницы в виде квадрата отображается значок «lock» FontAwesome, вставленный с использованием псевдоэлемента CSS. Позже на странице, используя точно такой же CSS, значок замка отображается правильно. Опять же, только в Chrome - значок блокировки отображается правильно везде в Firefox, IE и Edge (еще не тестировался в Safari).

https://thirdlamardev.wpengine.com/news/this-is-3rd-lamar/

Это S CSS, используемый везде, где должен появиться значок замка: 

.rcp-is-restricted .entry-title {
    position:relative;
    padding-left: 1em;

    &::before {
        display:inline-block;
        position:absolute;
        font-size:.8em;
        font-weight:300 !important;
        font-family: "Font Awesome 5 Pro" !important;
        content:"\f30d"; 
        color:black;
        left:0;
        top:.1em;
    }
}

Любые идеи будут наиболее желанный. Спасибо!

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

Предложения от комментаторов (@VigneshA @KK @WoAiNii) всем помогли, спасибо! После эксперимента комбинация из position:absolute и display:inline-flex, кажется, работает лучше всего кросс-браузер: 

.rcp-is-restricted .entry-title {
    position:relative;
    padding-left:.5em;

    &::before {
        position:absolute;
        display:inline-flex;
        font-size:.7em;
        font-weight:300 !important;
        font-family: "Font Awesome 5 Pro" !important;
        content:"\f30d"; 
        color:black;
        left:-.5em;
        top:.3em;
    }
}
1 голос
/ 15 апреля 2020

Извините, у вас недостаточно репутации для добавления комментария ... он отлично работает вне контейнера класса "post-header-inner"

...