Chrome 在页面的一部分上正确呈现字体图标，而不是在另一部分上答案

【问题标题】：Chrome renders font icon correctly on one part of page, but not anotherChrome 在页面的一部分上正确呈现字体图标，而不是在另一部分上
【发布时间】：2020-07-28 19:28:19
【问题描述】：

我遇到了最奇怪的问题，无法追踪。仅在 Chrome 中，在此页面的标题上，使用 CSS 伪元素插入的 FontAwesome“锁”图标显示为正方形。稍后使用完全相同的 CSS 在页面下方正确显示锁定图标。同样，仅在 Chrome 中 - 锁定图标在 Firefox、IE 和 Edge 中正确显示（尚未在 Safari 中测试）。

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

这是在所有应该出现锁图标的地方使用的 SCSS：

.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;
    }
}

任何想法都将受到欢迎。谢谢！

【问题讨论】：

删除display:inline-block并将位置从absolute更改为relative。它将在 chrome 中显示锁定图标。
从“entry-header entry-header-standard entry-header-thumbnail”中检查“entry-header”。一旦你删除了这个特定的类，锁就会出现。可能某些 CSS 属性会受到此类的影响。
另一种方式：将显示改为网格
另外，显示：inline-flex|flex|inline-grid|inline-table 也可以使用
谢谢！您的所有建议都有帮助。

标签： css google-chrome fonts webfonts

【解决方案1】：

抱歉，没有足够的声誉来添加评论......它在“post-header-inner”类容器之外工作正常

【讨论】：

【解决方案2】：

评论者的建议 (@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;
    }
}

【讨论】：