Usar un Glyphicon como viñeta de LI (Bootstrap 3)

Solución:

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 puede escalarla y colorearla y se mantendrá nítida en todas las resoluciones.

1. Encuentre el código de carácter del glyphicon abriendo los documentos de Bootstrap e inspeccionando el carácter que desea 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;
   }
   

   Es posible que desee modificar el color y los márgenes para adaptarlos a su tamaño y gusto de fuente.

Ver demostración y código

Si alguien viene aquí buscando hacer esto con Font Awesome Icons (como yo), vea aquí: https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

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

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

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

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

---

---

Utiliza Nuestro Buscador