防止列表中的文本在图标项目符号下换行

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;
}

无论我尝试过什么，都无法让文本停止在项目符号下换行。还需要稍微增加列表元素，以便它们与字体对齐。这是测试站点的链接：链接到实时测试站点

我尝试过"显示：内联块"和"列表样式位置：外部"，但没有运气。我可能把它们放在错误的地方。感谢您的任何建议。

Answer 1

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

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

Answer 2

只需添加相对于li:before的位置，并使用负top移动它并left

ul.fa-ul2 li:before {
  position: relative;
  top: -20px;
}

Answer 3

我想我得到了它来显示你想要的方式

小提琴：http://jsfiddle.net/a5w5pvr1/1/

ul.fa-ul2 li:before {
    font-family: FontAwesome;
    content:'f058';
    color: #6190C3;
    font-size: 28px;
    padding-right: 5px;
    margin-left: -1.1em;
}
li {
    list-style-type: none;
    display: block;
    margin-left: 1em;
    margin-top: 0.5em;
}

Answer 4

添加此代码以提升列表元素

ul.fa-ul2 li:before{
top: 5px;
}