html - 如何将列表项与 Font Awesome 图标下一行文本对齐？

Question

一张图描绘一千个单词。下一行的文本需要与上面的边距相同。

HTML:

<ul>
<li>
<p><em class="fa fa-square"></em><span>Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</span></p>
</li>
</ul>

CSS:

ul{
    display: table;
    a{
        padding-left: 10px;
    }
    span{
        padding-left: 10px;
    }
}

更新:

@panther 更新后:

这是可以接受的，但是 fontawesome 图标现在偏离了中心。

Answer 1

你可以尝试使用font awesome's built-in solution for lists :

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

---

在您的情况下，代码将更改为如下所示:

<ul class="fa-ul">
  <li><i class="fa fa-square"></i><span>Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</li>
</ul>