真棒字体5-SVG / JS伪类问题

Question

我已经看到许多答案来实现这一目标，但是这些答案都没有提到我遇到的问题。

因此，我正在使用Font Awesome的PRO SVG和JS库，并且最初在获取图标显示时遇到问题。我读到，不仅需要在CSS中正确包含正确的伪类标记，而且还需要在页面上添加一行JS：

window.FontAwesomeConfig = {searchPseudoElements：true}

虽然我的图标现在显示出来，但它们之前仍带有诱发愤怒的开放方形字形。

这就是我要标记的内容：

HTML

<ul class="actionMessage">
     <li><span>Your name has been changed successfully</span></li>
</ul>

CSS

.actionMessage {
    padding: 0.25rem;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: .75rem 1.25rem;
    border-radius: 0.25rem;
}

.actionMessage li {
    color: #155724;
}

.actionMessage li:before {
    content: "\f0f3";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Solid";
    font-weight: 900;
}

JS

window.FontAwesomeConfig = { searchPseudoElements: true }

我得到的结果是

那我做错了什么？我如何摆脱那个方形的标志符号？