html - 防止列表中的文本在图标元素符号下换行？

Question

我以前构建过列表并设置过样式，但这个列表是用 Font Awesome 字体制作的，并且是用 div 制作的(它不是全局的)。

我是这样开始的:

ul.fa-ul2 li:before {
    font-family: FontAwesome;
    content: '\f058';
    color: #6190C3;
    font-size: 28px;
    padding-right: 10px;
    margin-left: -15px;
}

无论我尝试过什么，都无法让文本在元素符号下停止换行。还需要让列表元素向上一点，以便它们与字体对齐。这是测试站点的链接: link to live test site

我试过“display: inline-block”和“list-style-position: outside”，但没有成功。我可能把它们放在了错误的地方。感谢您的任何建议。

Answer 1

将此样式集 position:absolute 添加到 li:before 和 li position:relative

ul.fa-ul2 > li{
 position: relative;
}

ul.fa-ul2 li:before {
 position: absolute;
 left: -13px;
}