Bootstrap - Liste des textes d'icônes - parvenir à un alignement horizontal cohérent

Question

Le problème:
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> 

Comme vous pouvez le voir - les icônes et les textes sont décalés par rapport aux verticales « colonnes » pour chacun d'eux .
C'est ma solution:
http://jsbin.com/iguH/6/edit

Peut-être qu'il est mieux/plus élégant ou une bonne/installees dans les bootstrap?

ps Un autre problème que je n'ai pas encore résolu - si le texte est multilined? Et il doit toujours être dans sa colonne - pas l'icône de wraps?

Answer 1

J'aurais une approche légèrement différente. Je voudrais utiliser des images de fond avec rembourrage. Cela permettrait également de résoudre votre problème multiligne.

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

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