Utiliser un Glyphicon comme un sharepoint balle LI (Bootstrap 3)

Comment puis-je modifier les puces d’une liste HTML et utiliser les glyphicons fournis avec Bootstrap 3?

Pour que:

  • ...
  • ...

Affiche comme:

  [icon] Facere possimus, omnis voluptas assumenda est, numquam eius modi omnis dolor repellendus. Non numquam eius modi numam dolor omnis tempora incidunt ut labore. [icon] Facere possimus, omnis voluptas assumenda est, numquam eius modi omnis dolor repellendus. Non numquam eius modi numam dolor omnis tempora incidunt ut labore. 

Je préférerais ne pas avoir à injecter du HTML supplémentaire comme celui-ci …

 
  • ...
  • ...

Ce n’est pas trop difficile avec un peu de CSS, et c’est bien mieux que d’utiliser une image pour la puce car vous pouvez la redimensionner et la colorer et elle restra nette à toutes les résolutions.

  1. Recherchez le code de caractère du glyphicon en ouvrant les documents Bootstrap et en inspectant le caractère que vous souhaitez utiliser.

    Inspection d'un glyphicon

  2. Utilisez ce code de caractère dans le CSS suivant

     li { display: block; } li:before { /*Using a Bootstrap glyphicon as the bullet point*/ content: "\e080"; font-family: 'Glyphicons Halflings'; font-size: 9px; float: left; margin-top: 4px; margin-left: -17px; color: #CCCCCC; } 

    Vous pouvez modifier la couleur et les marges en fonction de votre taille et de votre goût.

Voir la démo et le code

Si quelqu’un vient ici pour faire cela avec Font Awesome Icons (comme je l’étais), voir ici: https://fortawesome.github.io/Font-Awesome/examples/

 
  • List icons
  • can be used
  • as bullets
  • in lists

Les classes fa-ul et fa-li remplacent facilement les puces par défaut dans les listes non ordonnées.

J’utilise une version simplement simplifiée (en utilisant uniquement la position relative) basée sur la réponse de @SimonEast:

 li:before { content: "\e080"; font-family: 'Glyphicons Halflings'; font-size: 9px; position: relative; margin-right: 10px; top: 3px; color: #ccc; } 

Si vous voulez utiliser LESS, cela peut se faire comme ceci:

 li { .glyphicon-ok(); &:before { .glyphicon(); margin-left:-25px; float:left; } }