html - tabla - tipos de codificaciones

Carácter Unicode como viñeta para elemento de lista en CSS

Question

Necesito usar, por ejemplo, el símbolo de estrella (★) como la viñeta para un elemento de lista.

He leído el módulo CSS3: Listas , que describe cómo usar texto personalizado como viñetas, pero no funciona para mí. Creo que los navegadores simplemente no admiten el pseudo elemento ::marker .

¿Cómo puedo hacerlo, sin usar imágenes?

Answer 1

Usar texto como viñetas

Use li:before con una entidad Hex HTML escapada (o cualquier texto sin formato).

Ejemplo

Mi ejemplo generará listas con marcas de verificación como viñetas.

CSS :

ul {
list-style: none;
padding: 0px;
}
ul li:before
{
content: ''/2713'';
margin: 0 1em; /* any design */
}

Compatibilidad del navegador

No he probado a mí mismo, pero debe ser compatible a partir de IE8. Al menos eso es lo que dicen los css-tricks quirksmode y css-tricks .

Puede usar comentarios condicionales para aplicar soluciones más antiguas / lentas como imágenes o scripts. Mejor aún, use ambos con <noscript> para las imágenes.

HTML :

<!--[if lt IE 8]>
*SCRIPT SOLUTION*
<noscript>
*IMAGE SOLUTION*
</noscript>
<![endif]-->

Acerca de las imágenes de fondo

Las imágenes de fondo son realmente fáciles de manejar, pero ...

1. El soporte del navegador para background-size de background-size es en realidad solo a partir de IE9.
2. Los colores de texto HTML y las fuentes especiales ( locas ) pueden hacer mucho, con menos solicitudes HTTP.
3. Una solución de script puede simplemente inyectar la entidad HTML y dejar que el mismo CSS haga el trabajo.
4. Un buen código CSS de restablecimiento puede hacer que list-style (la opción más lógica) sea más fácil.

Disfrutar.

Answer 2

¡Esta es la solución W3C que puedes usar en 3012!

ul { list-style-type: "★"; }
/* Sets the marker to a "star" character */

http://dev.w3.org/csswg/css-lists/#marker-content

Answer 3

Este tema puede ser antiguo, pero aquí hay una solución rápida ul {list-style:outside none square;} o ul {list-style:outside none disc;} , etc ...

luego agrega relleno izquierdo para enumerar el elemento

ul li{line-height: 1.4;padding-bottom: 6px;}

Answer 4

No se recomiendan las imágenes, ya que pueden aparecer pixeladas en algunos dispositivos (dispositivos Apple con pantalla Retina) o cuando se amplía. Con un personaje, su lista se ve increíble cada vez.

Aquí está la mejor solución que he encontrado hasta ahora. Funciona muy bien y es un navegador cruzado (IE 8+).

ul {
list-style: none;
padding-left: 1.2em;
text-indent: -1.2em;
}
li:before {
content: "►";
display: block;
float: left;
width: 1.2em;
color: #ff0000;
}

Lo importante es tener el personaje en un bloque flotante con un ancho fijo para que el texto permanezca alineado si es demasiado largo para caber en una sola línea. 1.2em es el ancho que deseas para tu personaje, cámbialo para tus necesidades. No olvide restablecer el relleno y el margen para los elementos ul y li.

EDITAR: tenga en cuenta que el tamaño "1.2em" puede variar si utiliza una fuente diferente en ul y li: before. Es más seguro usar píxeles.

Answer 5

Para agregar una estrella usa el carácter Unicode 22C6 .

Agregué un espacio para hacer un pequeño espacio entre el li y la estrella. El código para el espacio es A0 .

li:before {
content: ''/22C6/A0'';
}

Answer 6

Prueba este código ...

li:before {
content: "→ "; /* caractère UTF-8 */
}

Answer 7

Puedes construirlo:

#modal-select-your-position li {
/* handle multiline */
overflow: visible;
padding-left: 17px;
position: relative;
}
#modal-select-your-position li:before {
/* your own marker in content */
content: "—";
left: 0;
position: absolute;
}

Answer 8

Un ejemplo más completo de la respuesta de 222 :

ul {
list-style:none;
padding: 0 0 0 2em; /* padding includes space for character and its margin */
/* IE7 and lower use default */
*list-style: disc;
*padding: 0 0 0 1em;
}
ul li:before {
content: ''/25BA'';
font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
margin: 0 1em 0 -1em; /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */
/* IE7 and lower use default */
*content: none;
*margin: 0;
}
ul li {
text-indent: -1em; /* negative text indent brings first line back inline with the others */
/* IE7 and lower use default */
*text-indent: 0;
}

He incluido propiedades star-hack para restaurar los estilos de lista predeterminados en versiones anteriores de IE. Puede extraerlos e incluirlos en un include condicional si lo desea, o reemplazarlos con una solución basada en imágenes de fondo. Mi humilde opinión es que los estilos especiales de bala implementados de esta manera deberían degradarse con gracia en los pocos navegadores que no admiten pseudo-detectores.

Probado en Firefox, Chrome, Safari e IE8-10 y se procesa correctamente en todos.

Answer 9

EDITAR

Probablemente ya no recomendaría usar imágenes. Me apegaría al enfoque de usar un carácter Unicode, como este:

li:before {
content: "/2605";
}

ANTIGUA RESPUESTA

Probablemente busque un fondo de imagen, son mucho más eficientes, versátiles y compatibles con varios navegadores.

Aquí hay un ejemplo:

<style type="text/css">
ul {list-style:none;} /* you should use a css reset too... ;) */
ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Answer 10

ul {
list-style-type: none;
}
ul li:before {
content:''*''; /* Change this to unicode as needed*/
width: 1em !important;
margin-left: -1em;
display: inline-block;
}