twitter-bootstrap - item - glyphicon glyphicon

Usar un glifón como punto de viñeta LI(Bootstrap 3)

Question

¿Cómo puedo cambiar los puntos en una lista HTML y usar los glyphicons que vienen con Bootstrap 3?

Así que eso:

<ul>
    <li>...</li>
    <li>...</li>
</ul>

Muestra como:

 [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.

Preferiría no tener que inyectar HTML adicional como este ...

<ul>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
</ul>

Answer 1

Esto no es demasiado difícil con un poco de CSS, y es mucho mejor que usar una imagen para la viñeta ya que puedes escalarla y colorearla y se mantendrá nítida en todas las resoluciones.

1. Encuentra el código de personaje del glyphicon abriendo los documentos de Bootstrap e inspeccionando el personaje que deseas usar.

2. Use ese código de carácter en el siguiente CSS

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

   Puede ajustar el color y los márgenes para adaptarlos al tamaño y el gusto de su fuente.

Ver demostración y código

Answer 2

Estoy usando una versión simplificada (solo usando la posición relativa) basada en la respuesta @SimonEast:

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

Answer 3

Si alguien viene aquí buscando hacer esto con Font Awesome Icons (como yo), mira aquí: https://fortawesome.github.io/Font-Awesome/examples/

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Las clases fa-ul y fa-li reemplazan fácilmente las viñetas predeterminadas en listas desordenadas.

Answer 4

Si desea utilizar LESS, puede lograrlo de la siguiente manera:

li {
    .glyphicon-ok();

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