Bootstrap - 图标文本列表 - 实现一致的水平对齐

Question

问题：
http://jsfiddle.net/3jAk2/

<div><i class='icon-camera-retro'></i> Text text text</div>
<div><i class='icon-download'></i> Text text text</div>

正如您所看到的 - 图标和文本相对于每个图标和文本相对于垂直“列”移动。
那是我的解决方案：
http://jsbin.com/iguH/6/edit

也许在引导程序中有更好/更优雅或更合适/内置？

PS 我还没有解决的另一个问题 - 如果文字是多线的呢？它仍然需要在其专栏中 - 而不是包装图标？

Answer 1

我的方法略有不同。我会使用带填充的背景图像。这也可以解决您的多线问题。

DEMO http://jsfiddle.net/kevinPHPkevin/3jAk2/1/

div {
    padding-left:20px;
    background:url('yourURL') no-repeat left 2px;
    background-size: 15px 15px;
}