引導 - 圖標文字列表 - 獲得一致的水平對齊方式

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