字体真棒列表填充

Question

我在使用 Font Awesome 列表标记时遇到了一些困难。我正在使用文档中提供的解决方案：

ul li {
  padding: 10px 0;
  border-bottom: dotted 1px #222;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul">
  <li><i class="fa fa-li fa-check-square"></i>List Item</li>
  <li><i class="fa fa-li fa-check-square"></i>List Item</li>
</ul>

这是fiddle

问题在于填充。如果我在 <li> 元素上设置填充，<i> 元素不会收到填充设置。

谢谢。

Answer 1

将 ,i 添加到您的 CSS 代码中：

ul li, i {
padding: 10px 0;
border-bottom: dotted 1px #222;
}

这会将 ul li 的填充 CSS 应用到 i。

工作 JSFiddle： https://jsfiddle.net/joe_young/q4Lzrvnf/

Answer 2

如果您应用 .fa-li class，图标将不会考虑填充，因为在这种情况下它们会变成绝对定位。但是，您可以做的是将它们垂直放置到 50%，然后将它们稍微向后移动一半的高度，并进行负平移：

.fa-li {
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

演示： http://jsfiddle.net/fknfe8xq/1/

Answer 3

这是预期的，因为图标是相对于 ul 绝对定位的 container.So 它们不会 styled.You 必须单独设置样式。

i {
    margin-top: 10px;
}

Answer 4

您必须为 ul li 和 ul li i 设置相同的 top/bottom 填充。

Working example

ul li {
    padding: 10px 0;
    border-bottom: dotted 1px #222;
}

ul li i {
    padding: 10px 0px;
}

字体真棒列表填充

Font Awesome list padding

html

css

font-awesome