Como adicionar ícones a listas nos posts

badulaque · 06/10/2012

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)

Texto
Texto
Texto
Texto

En definitiva, ¿puedo añadir otros iconos a parte de los predefinidos (los puntos y los números)? ¿Cómo?

ecoal95 · 06/10/2012

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:

Inserir CODE, HTML ou 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;
}

badulaque · 06/10/2012

ecoal95 disse:
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?

ecoal95 · 06/10/2012

badulaque disse:
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)).

Como adicionar ícones a listas nos posts

badulaque

ecoal95

badulaque

ecoal95

Tópicos similares