Css Chrome可以在页面的一部分正确呈现字体图标，但不能在另一部分正确呈现

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

这是在锁图标出现的任何地方使用的SCS：

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

---

任何想法都是非常受欢迎的。谢谢

抱歉，没有足够的声誉添加评论。。。在“post header internal”类容器之外，它可以正常工作

抱歉，没有足够的声誉添加评论。。。它在“post header-inner”类容器之外运行良好

评论员（@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;
    }
}

---

来自评论者（@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;
    }
}

---

移除

显示：内联块

，并将位置从

绝对

更改为

相对

。它将在chrome中显示锁定图标。从“条目标题标准条目标题缩略图”中选中“条目标题”。删除此特定类后，将显示锁。可能某些CSS属性正受到此类的影响。另一种方法：将display更改为grid另外，display:inline-flex | flex | inline-grid | inline-table可以正常工作！您的所有建议都有帮助。删除

显示：内联块

，并将位置从

绝对

更改为

相对

。它将在chrome中显示锁定图标。从“条目标题标准条目标题缩略图”中选中“条目标题”。删除此特定类后，将显示锁。可能某些CSS属性正受到此类的影响。另一种方法：将display更改为grid另外，display:inline-flex | flex | inline-grid | inline-table可以正常工作！你所有的建议都有帮助。