在WordPress中使用css在文本旁边对齐字体真棒图标[关闭]答案

【问题标题】：Align font-awesome icon beside text using css in WordPress [closed]在WordPress中使用css在文本旁边对齐字体真棒图标[关闭]
【发布时间】：2020-09-09 02:30:40
【问题描述】：

我已尝试检查 SO，但没有发现间接解决我的情况。我正在开发一个 WordPress 网站。我已经使用其定制器向页面添加了图标，但需要完成对齐它们。目前，图标浮动在文本上。我无法访问源代码，只能使用定制器来完成这项工作。

This is the main text in a tab I'm adding icons to
<li id="friends-personal-li" class="bp-personal-tab">
    <a href="https://yyyyyy.com/profile/" id="user-friends">Friends<span class="count">2</span></a>
</li>

这是我要添加的字体很棒的图标

#friends-personal-li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c0";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    color: blueviolet;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

【问题讨论】：

我测试了你的代码，看起来应该没问题。我的猜测是影响::before 伪元素的更广泛的样式导致它位于您的文本之上。也许是li 的自定义项目符号？使用浏览器的开发人员工具右键单击“检查”元素，查看li 和::before 应用了哪些样式。如果您发现它在上面的选择器中覆盖它。
你是对的。我添加了另一个 CSS 样式来对齐它。现在好了。
很高兴听到这个消息。 :)

标签： css wordpress html-lists font-awesome buddypress

【解决方案1】：

你可以试试

#friends-personal-li{
  position: relative;
}
#friends-personal-li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c0";
    display: inline-block;
    font-weight: 900;
    color: blueviolet;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
    position: absolute;
    top: -2px;
    left: -3ch;
}

如果你想做这样的事情

如果您将父项设为position: relative;，那么您可以使用absolute 轻松放置:before 元素并引用父项。

【讨论】：