css - 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

我会有一个稍微不同的方法。我会使用带填充的背景图像。这也将解决您的多行问题。

演示http://jsfiddle.net/kevinPHPkevin/3jAk2/1/

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