Bootstrap - Comment utiliser les icônes dans les listes/onglets?

Je vais essayer d'obtenir un couple d'effets dans Twitter Bootstrap, mais j'ai du mal, et je suis sûr qu'il doit avoir été fait avant. Les deux sont assez similaires, donc je les ai roulé dans une seule question.

Ce que je veux faire est d'obtenir des Icônes de travail au sein d'une liste et une barre de navigation. Une rapide illustration de chaque effet, je suis en train de faire grâce à un peu de peinture:

Liste

Bootstrap - Comment utiliser les icônes dans les listes/onglets?

<div class="well span4">
   <ul class="nav nav-list">
       <li class="active"><a href="#">Value 1</a></li>
       <li><a href="#">Value 2</a></li>
       <li><a href="#">Value 3</a></li>
   </ul>
</div>

J'ai essayé y compris <img> et <span> et <div> tous les class="close" mais aucun ne semble fonctionner correctement, le plus proche que j'ai pu obtenir pour avoir leur affichage sur la ligne suivante.

De La Barre De Navigation

Bootstrap - Comment utiliser les icônes dans les listes/onglets?

<div class="navbar">
        <div class="navbar-inner">
            <div class="container" style="width: auto;">
                <a class="brand" href="#">NavBar</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="divider-vertical"></li>
                        <li class="active">
                            <img src="edit.png" width="16" height="16"/>
                            <a href="#">Nav 1</a>
                        </li>
                        <li>
                            <img src="play.png" width="16" height="16"/>                               
                            <a href="#">Nav 2</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Ce que je veux, ici, est d'afficher les deux icônes à côté de la barre de navigation des articles (et à l'intérieur de la région active pour le premier élément de la barre de navigation). Même type de problème que de la liste, l'image est poussé au-dessus de ce temps. J'ai retouché la Nav2 pour illustrer l'effet que je veux réaliser.

J'ai essayé <img>, et je l'ai fait essayer une <i> mais je crois que c'est magique en quelque sorte et toujours le point à une sorte de glyphe icônes - j'ai besoin d'aller lire à ce sujet. Ce que je veux vraiment, c'est utiliser des images personnalisées ici.

Des suggestions /peu d'exemples serait génial. Merci.

laissez-moi savoir si vous avez besoin de plus d'aide

OriginalL'auteur Ian | 2013-02-26