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
<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
<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.
OriginalL'auteur Ian | 2013-02-26
Vous devez vous connecter pour publier un commentaire.
J'ai utilisé fontawesome icônes qui sont mieux que des images .
La syntaxe pour utiliser des icônes dans le bootstrap est d'utiliser la balise avec un nom de classe de l'icône de l' .
PAR défaut glyphicons sont présents dans le bootstrap mais fontawesome a plus d'icônes et est totalement gratuit .
Vous pouvez en savoir plus à propos de la police-génial ici :http://fortawesome.github.com/Font-Awesome/#integration
C'est comment vous pouvez créer votre navigation et des listes avec des icônes :
Jsfiddle pour vous http://jsfiddle.net/shail/GKsSd/2/
Résultat dans le navigateur :
Pour la navigation, vous pouvez faire la même chose :
Juste au cas où vous avez désespérément besoin d'utiliser des images. Vous aurez à créer des classes et de mettre l'icône de l'image à l'intérieur . Comme suit :
wat question êtes-vous de l'avoir mis en œuvre . Si vous pouvez jeter une page de test .. je peux rendre de plus d'aide . Cheers !
Voici un JSFiddle jsfiddle.net/IPWright83/K9kUg de l'exemple non perçus fourni, à l'aide de la cerulean bootswatch thème.
Le violon de la vôtre n'est pas de travail depuis les glyphicons ne sont pas de chargement . Exemple de travail de l'ur jsfiddle jsfiddle.net/shail/K9kUg/2 .
Pour faire de votre jsfiddle travail .. charge les fichiers css de les ajouter dans la section des ressources , qui est sur le côté gauche . Ajouter <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" >
OriginalL'auteur Shail
Pour Bootstrap 3, vous pouvez faire quelque chose comme ceci en utilisant les glyphicons qui sont inclus avec Bootstrap...
De groupe de la liste avec des icônes:
Onglets avec des icônes..
ou, empilées gps avec des icônes..
Codeply extraits: http://codeply.com/go/E0R4MTFrFS
OriginalL'auteur Zim