mark - simbolo check html
Símbolo de tick en HTML/XHTML (12)
Necesitamos mostrar un símbolo de tilde (✓ o ✔) dentro de una aplicación web interna y, idealmente, nos gustaría evitar el uso de una imagen.
Tiene que funcionar a partir de IE 6.0.2900 en una caja de XP, lo ideal es que sea un navegador cruzado (IE + versiones recientes de FF).
Lo siguiente muestra cuadros aunque establece la codificación del navegador en UTF-8 (META funciona bien y no es el problema). La fuente predeterminada es Times New Roman (puede ser un problema, pero intentarlo con Lucida Sans Unicode no ayuda y no tengo ni Arial Unicode MS, ni Lucida Grande instalada).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
✓ ✔
</body>
</html>
Cualquier ayuda apreciada.
Los siguientes trabajos bajo IE 6.0 y IE 7:
<html>
<head>
</head>
<body>
<span style="font-family: wingdings; font-size: 200%;">ü</span>
</body>
</html>
Apreciaría si alguien pudiera verificar bajo FF en Windows. Estoy bastante seguro de que no funcionará en una caja que no sea Windows.
aunque establece la codificación del navegador a UTF-8
(Si está utilizando referencias de caracteres numéricos, por supuesto, no importa qué codificación se esté utilizando, los navegadores obtendrán el punto de código Unicode correcto directamente del número).
<span style="font-family: wingdings; font-size: 200%;">ü</span>
Apreciaría si alguien pudiera verificar bajo FF en Windows. Estoy bastante seguro de que no funcionará en una caja que no sea Windows.
Me falla en Firefox 3, Opera y Safari. Curiosamente, funciona en el otro navegador Webkit, Chrome. También falla en Linux (obviamente, como Wingdings no está instalado allí; está instalado en Mac, pero eso no ayuda si Safari no lo tiene).
También es un truco bastante desagradable: ese personaje es para todos los propósitos y propósitos "ü" y aparecerá de esa manera en cosas como los motores de búsqueda, o si el texto está copiado y pegado. Los puntos de código Unicode adecuados son el camino a seguir, a menos que realmente no tenga otra alternativa.
El problema es que ninguna fuente incluida con los suministros de Windows U + 2713 CHECK MARK (''✓''). El único que es probable que encuentre en una máquina con Windows es "Arial Unicode MS", en el que no se puede confiar realmente. Así que al final creo que tendrás que:
- use un carácter diferente que sea mejor admitido (por ejemplo, ''●'' - bullet , como la usa SO), o
- use una imagen, con ''✓'' como texto alternativo.
¿Bastaría √ (símbolo de raíz cuadrada, & # 8730;)?
Alternativamente, asegúrese de configurar el Content-Type: antes de enviar datos al navegador. La simple especificación de la etiqueta <meta> de tipo de contenido puede no ser suficiente para alentar a los navegadores a utilizar el conjunto de caracteres correcto.
¿Por qué no usa el elemento de casilla de verificación de entrada HTML en modo de solo lectura?
<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />
Supongo que esto funcionará en todos los navegadores.
Creo que estás usando valores de Unicode que tienen menos soporte, que no siempre tienen glifos para todos los puntos de código.
Pruebe los siguientes caracteres:
- ☐ ( 0x2610 en hexadecimal Unicode [HTML decimal:
☐]): casilla de verificación vacía (sin marcar) - ☑ ( 0x2611 [HTML decimal:
☑]): la versión marcada de la casilla de verificación anterior - ✓ ( 0x2713 [HTML decimal:
✓]) - ✔ ( 0x2714 [HTML decimal:
✔])
Edición: Parece que hay cierta confusión sobre el primer símbolo aquí, ☐ / 0x2610. Esta es una casilla de verificación vacía (sin marcar), así que si ve una casilla, esa es la forma en que se supone que debe verse. Es la contraparte de ☑ / 0x2611, que es la versión verificada.
En primer lugar, debe darse cuenta de que en realidad no necesita usar entidades HTML, siempre que la codificación de su documento HTML se declare correctamente como UTF-8, puede copiar / pegar estos símbolos en su archivo / script del lado del servidor / JavaScript / lo que sea.
Dicho esto, aquí está la lista exhaustiva de todos los caracteres UTF-8 relevantes / entidades HTML relacionadas con este tema:
- ☐ (hex:
☐/ dec:☐): urna (vacía, así se supone que debe ser) - ☑ (hex:
☑/ dec:☑): urna con cheque - ☒ (hex:
☒/ dec:☒): urna con x - ✓ (hex:
✓/ dec:✓): marca de verificación, equivalente a✓y✓en la mayoría de los navegadores - ✔ (hex:
✔/ dec:✔): marca de verificación pesada - ✗ (hex:
✗/ dec:✗): papeleta x - ✘ (hex:
✘/ dec:✘): papeleta pesada x - 🗸 (⚠ hex:
🗸/ dec🗸): marca de verificación de luz (mal soportada a partir de 2017) - ✅ (⚠ hex:
✅/ dec:✅): marca de verificación pesada blanca (soporte mixto a partir de 2017) - 🗴 (⚠ hex:
🗴/ dec:🗴): guión de boleta X (mal apoyado a partir de 2017) - 🗶 (⚠ hex:
🗶/ dec:🗶): secuencia de comandos negrita de la boleta X (mal apoyado a partir de 2017) - ⮽ (⚠ hex:
⮽/ dec:⮽): urna con luz X (mal apoyado a partir de 2017) - 🗵 (⚠ hex:
🗵/ dec:🗵): urna con guión X (mal apoyado a partir de 2017) - 🗹 (⚠ hex:
🗹/ dec:🗹): urna con cheque en negrita (mal apoyado a partir de 2017) - 🗷 (⚠ hex:
🗷/ dec:🗷): urna con guión en negrita X (mal apoyado en 2017)
¿Revisando las fuentes web para los símbolos de tick? Aquí hay una muestra lista para usar para las más comunes: A☐B☑C☒D✓E✔F✗G✘H - simplemente copie / pegue esto en el cuadro de texto de muestra de su proveedor de Webfont y vea qué fuentes son compatibles con los símbolos de marca.
La máquina cliente necesita una fuente adecuada que tenga un glifo para que este personaje la muestre. Pero Times New Roman no lo hace. Prueba Arial Unicode MS o Lucida Grande en su lugar:
<span style="font-family: Arial Unicode MS, Lucida Grande">
✓ ✔
</span>
Esto me funciona en Windows XP en IE 5.5, IE 6.0, FF 3.0.6.
Llegando muy tarde a la fiesta, encontré que ✓ (✓) Trabajó en ópera. No lo he probado en ningún otro navegador, pero podría ser útil para algunas personas.
Me encuentro con el mismo problema y ninguna de las sugerencias funcionó (Firefox en Windows XP).
Así que encontré una posible workaround utilizando datos de imagen para mostrar una pequeña marca de verificación:
span:before {
content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}
Por supuesto, puede crear su propia imagen de marca de verificación y usar un convertidor para agregarla como datos: imagen / gif. Espero que esto ayude.
Normalmente uso la fuente fontawesome ( http://fontawesome.io/icon/check/ ), puedes usarla en archivos html:
<i class="fa fa-check"></i>
o en css:
content: "/f00c";
font-family: FontAwesome;
Solución que utiliza Wingdings que no está basada en Unicode y no funciona en Linux sin Wingdings instalado.
Crossed Checkbox
<div style="font-family: Wingdings;">û</div> ☒
Checked Checkbox
<div style="font-family: Wingdings;">ü</div> ☑
Cross
<div style="font-family: Wingdings;">ý</div> ✗
Check
<div style="font-family: Wingdings;">þ</div> ✓
podrías usar ⊕ o ⊗
.className {
content: ''/✓'';
}
Al utilizar la propiedad de contenido CSS, puede mostrar la marca de verificación con una imagen u otro código.