Cómo añadir iconos a listas en las entradas

  • Autor Autor badulaque
  • Fecha de inicio Fecha de inicio
B

badulaque

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Siento el título tan poco claro, pero no sé muy bien cómo expresar lo que quiero hacer.

Veréis, quiero añadir icónos en las entradas pero sin que sea un archivo .jpg. Supongamos que quiero crear una lista, ¿cómo hago para crear una lista así, pero que en lugar de ese punto, sea otro icono?

  • Texto
  • Texto
  • Texto
  • Texto
  • Texto

O así, pero que en lugar de un número sea un icono cualquiera (sin ser .jpg, o similar)

  1. Texto
  2. Texto
  3. Texto
  4. Texto

En definitiva, ¿puedo añadir otros iconos a parte de los predefinidos (los puntos y los números)? ¿Cómo?
 
Sí, sólo es CSS:
Suponte que tienes una lista tal que así:
HTML:
<ul class="lista-personalizada">
    <li>Cualquier cosa</li>
    <li>Cualquier cosa 2</li>
    <li>Cualquier cosa 3</li>
    <li>Cualquier cosa 4</li>
</ul>

Tendríamos que usar el pseudoelemento ::before para mostrar otra cosa:
Insertar CODE, HTML o PHP:
.lista-personalizada {
    list-style: none;
    padding: 0;
}
.lista-personalizada li:before {
   content: "\00BB" /* Este sería el caracter que quieres usar en Unicode: U+00BB -> \00BB */
   display: inline-block;
   margin-right: .2em;
}
 
Sí, sólo es CSS:
Suponte que tienes una lista tal que así:

Muchas gracias, de verdad. Andaba perdidísimo en este tema y esto me ha aclarado algo.

Pero soy francamente torpe, y me quedan dos dudas. ¿Dónde tendría que añadir ese código y cómo sé cuál es el unicode del caracter que quiero usar?
 
El código HTML (la lista), va en cualquier página web.
El CSS va en un archivo externo, o entre etiquetas <style> y </style>.

Puedes encontrar una tabla unicode completa Enlace eliminado, aunque hay listas más amigables.

Por ejemplo, para usar un tic (fila 2710, columna 4), tendrías que usar \2714 (el cuatro es el número de columna, o la letra si fuera el caso (A-F)).