jquery - Font Awesome 图标不会移动

Question

所以我对 font awesome 的回复图标的放置有一点问题。我一直试图将它放在我的心脏图标旁边，但没有用。它只是坐在我的 div 的一 Angular ，我尝试使用一些方法来移动它，但是 vertical-align: middle 和我在其他帖子上读到的其他技术在我的情况下不起作用.

这里是 div 的样子:

<div class="bubble sender first animate-bottom">
    <li class = "display" style = "color = white"> tkjfjk fjkg gfkjgdj gjkd reyk gklfg kgldg gfdklgd gkdlgd way &nbsp; &nbsp;
        <i class="fas fa-heart liked" aria-hidden="true"></i> <sub>6</sub>&nbsp; &nbsp; &nbsp; &nbsp;
        <i class="fa fa-reply reply" aria-hidden="true"></i>
    </li>
    <br>
    <span>

按理来说应该是正确的位置，但事实并非如此。任何帮助将不胜感激。

JS Fiddle 在这里:https://jsfiddle.net/eam6yq28/

Answer 1

每当你想对超棒的字体图标进行 css 更改时，请尝试在 :before 选择器中进行更改。

在您的情况下，将以下代码添加到您的 css 文件

.fa-mail-reply:before, .fa-reply:before {
    position: absolute;
    bottom: 0;
    right: 85px;
}
li {
    list-style-type: none;
    position: relative;
}

这是 js-fiddle: https://jsfiddle.net/tua85Lrc/1/