Símbolo de marca en HTML / XHTML

279

Necesitamos mostrar un símbolo de marca (✓ o ✔) dentro de una aplicación web interna y lo ideal sería evitar usar una imagen.

Tiene que funcionar comenzando con IE 6.0.2900 en una caja XP, idealmente necesitamos que sea cross-browser (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 probar Lucida Sans Unicode no ayuda y no tengo instalado Arial Unicode MS ni Lucida Grande).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

Cualquier ayuda apreciada.

Lo siguiente funciona bajo IE 6.0 e IE 7:

<html>
<head>

</head>
<body>
 <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
</body>
</html>

Agradecería si alguien pudiera verificar bajo FF en Windows. Estoy bastante seguro de que no funcionará en un cuadro que no sea Windows.

html xhtml Vlad Gudim
fuente
1
¿Cómo se supone que debe ser un símbolo de marca?
John Feminella
has visto esto: html-faq.com/htmlbasics/?specialcharacters
Sam Hasler
2
Sam, mira la pregunta.
Vlad Gudim
@Totophil, sé que habla de las mismas entidades, pero también sugiere que el servidor envíe un encabezado HTTP real Tipo de contenido: texto / html; charset = utf-8, así como el problema de que la fuente en uso podría no contener glifos para los caracteres utilizados.
Sam Hasler
Aquí hay un par: amp-what.com/#q=check%20mark & # x2713 & # x2714
ndp

Respuestas:

454

Creo que está utilizando valores Unicode menos compatibles, que no siempre tienen glifos para todos los puntos de código.
Prueba los siguientes personajes:

  • ☐ ( 0x2610 en Unicode hexadecimal [HTML decimal: &#9744;]): una casilla de verificación vacía (sin marcar)
  • ☑ ( 0x2611 [HTML decimal: &#9745;]): la versión marcada de la casilla de verificación anterior
  • ✓ ( 0x2713 [HTML decimal: &#10003;])
  • ✔ ( 0x2714 [HTML decimal: &#10004;])

Editar: Parece haber cierta confusión sobre el primer símbolo aquí, ☐ / 0x2610. Esta es una casilla de verificación vacía (sin marcar), por lo que si ve una casilla, así es como debe verse. Es la contraparte de ☑ / 0x2611, que es la versión comprobada.

John Feminella
fuente
1
Configuración corporativa: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
Vlad Gudim
El primero es una caja para mí, el resto funciona bien. Sin embargo, usaría una imagen en su lugar, solo para estar seguro.
mbillard
66
Para ser claros, se supone que la primera imagen es una caja, ¡es una casilla vacía!
John Feminella
1
@Totophil: Ah, está bien. Estoy usando Ubuntu, y la fuente sans predeterminada que configuré en FF tiene estos glifos. En Windows, simplemente use el mapa de caracteres para buscar estos glifos y ver si la fuente deseada los tiene. Si no, deberás elegir uno diferente.
John Feminella
55
Código decimal de la caja vacía: 0x2610 -> 9744. para que el código HTML tenga el mismo aspecto que la &#9744;casilla marcada: 0x2611 -> 9745 y código HTML&#9745;
Vikas
272

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, simplemente 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:

  • ☐ (hexadecimal: &#x2610;/ dec:): &#9744;urna (vacía, así se supone que debe ser)
  • Hex (hex: &#x2611;/ dec:) &#9745;: urna con cheque
  • Hex (hex: &#x2612;/ dec:) &#9746;: urna con x
  • ✓ (hexadecimal: &#x2713;/ dec:): &#10003;marca de verificación, equivalente &checkmark;y &check;en la mayoría de los navegadores
  • ✔ (hex: &#x2714;/ dec:): &#10004;marca de verificación pesada
  • ✗ (hex: &#x2717;/ dec:) &#10007;: boleta x
  • ✘ (hex: &#x2718;/ dec:): &#10008;papeleta pesada x
  • 🗸 (⚠ hexadecimal: &#x1F5F8;/ dec &#128504;): marca de verificación ligera (poco compatible a partir de 2017)
  • ✅ (⚠ hex: &#x2705;/ dec :): &#9989;marca de verificación pesada blanca (soporte mixto a partir de 2017)
  • 🗴 (⚠ hexadecimal: &#x1F5F4;/ dec :) &#128500;: guión de votación X (mal admitido a partir de 2017)
  • 🗶 (⚠ hexadecimal: &#x1F5F6;/ dec :) &#128502;: guión en negrita de la boleta X (mal admitido a partir de 2017)
  • ⮽ (⚠ hexadecimal: &#x2BBD;/ dec :) &#11197;: urna con luz X (mal soportada a partir de 2017)
  • 🗵 (⚠ hexadecimal: &#x1F5F5;/ dec :) &#128501;: urna con guión X (mal admitido a partir de 2017)
  • 🗹 (⚠ hex: &#x1F5F9;/ dec :) &#128505;: urna con cheque en negrita (mal admitido a partir de 2017)
  • 🗷 (⚠ hex: &#x1F5F7;/ dec :) &#128503;: urna con negrita X (mal admitida a partir de 2017)

¿Verifica las fuentes web para los símbolos de marca? Aquí hay una muestra lista para usar para las más comunes: A☐B☑C☒D✓E✔F✗G✘Hsimplemente copie / pegue esto en el cuadro de texto de muestra de su proveedor de fuentes web y vea qué fuentes admiten qué símbolos de marca.

Bogdan Stăncescu
fuente
17

La máquina del cliente necesita una fuente adecuada que tenga un glifo para que este personaje lo muestre. Pero Times New Roman no. Pruebe Arial Unicode MS o Lucida Grande en su lugar:

<span style="font-family: Arial Unicode MS, Lucida Grande">
    &#10003; &#10004;
</span>

Esto funciona para mí en Windows XP en IE 5.5, IE 6.0, FF 3.0.6.

Gumbo
fuente
No tengo ninguna fuente, solo Lucida Sans Unicode que remotamente se ve como fuente Unicode pero no tiene los ticks.
Vlad Gudim
A continuación una lista de algunas fuentes que tienen un glifo para este personaje: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.
Gumbo
Gumbo, no funciona. Además no tengo instalado Arial Unicode MS y Lucida Grande.
Vlad Gudim
Es lo más cerca que se puede llegar, pero desafortunadamente Lucida Sans Unicode no suministra U + 2713/2714.
bobince
13

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;
stefan
fuente
11

¿Por qué no utiliza el elemento de casilla de entrada de 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.

Drejc
fuente
66
No necesitamos un control, solo una indicación de que cierta opción está disponible dentro de una matriz. Usar un control deshabilitado sería incorrecto en este caso.
Vlad Gudim
11

Me encuentro con el mismo problema y ninguna de las sugerencias funcionó (Firefox en Windows XP).

Así que encontré una posible solución usando datos de imágenes 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.

Kai Noack
fuente
8

aunque establece la codificación del navegador en 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%;">&#252;</span>

Agradecería si alguien pudiera verificar bajo FF en Windows. Estoy bastante seguro de que no funcionará en un cuadro 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, ya que Wingdings no está instalado allí; está instalado en Mac, pero eso no te ayuda si Safari no lo tiene).

También es un truco bastante desagradable: ese carácter es para todos los efectos "ü" y aparecerá de esa manera en cosas como los motores de búsqueda, o si el texto se copia y pega. 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 Windows proporciona U + 2713 CHECK MARK ('✓'). El único que es probable que encuentre en una máquina con Windows es "Arial Unicode MS", que no es realmente confiable. Así que al final creo que tendrás que:

  • use un carácter diferente que esté mejor soportado (ej. '●' - viñeta , como lo usa SO), o
  • use una imagen, con '✓' como texto alternativo.
bobince
fuente
8

Al llegar muy tarde a la fiesta, descubrí que &check;(✓) trabajaba en Opera. No lo he probado en ningún otro navegador, pero podría ser útil para algunas personas.

rossum
fuente
44
Vale la pena señalar que &check;(y &checkmark;) ambos evalúan &#10003;, que es lo que usa la respuesta principal. Es una entidad de caracteres HTML5 y no funcionaría en IE6.
James Donnelly
5 
.className {
   content: '\&#x2713';
}

Usando la propiedad de contenido CSS, puede mostrar tick con una imagen u otro código.

s-sharma
fuente
No está seguro: w3schools.com/cssref/pr_gen_content.asp espectáculos comapatibily con Firefox
s-Sharma
todomvc.com/labs/architecture-examples/react comprueba si funciona o no, ya que están utilizando contenido para la marca de verificación.
s-sharma
44
Si desea usar códigos utf-8 en contenido CSS, de esta manera es posible:.class{ content: "\2713"; }
Morteza Ziyae
4

¿Sería suficiente √ (símbolo de raíz cuadrada, & # 8730;)?

Alternativamente, asegúrese de configurar el Content-Type:encabezado antes de enviar datos al navegador. Simplemente especificar la <meta>etiqueta de tipo de contenido puede no ser suficiente para alentar a los navegadores a usar el conjunto de caracteres correcto.

Ian Kemp
fuente
¡Gracias! La raíz cuadrada funciona, pero se parece un poco a errr ... ¿raíz cuadrada? Pero supongo que en ausencia de una alternativa, probablemente sería lo más cercano posible.
Vlad Gudim
1
Por cierto, la especificación de la etiqueta meta establece UTF-8 muy bien en mi IE, por lo que en este caso ese no es el problema.
Vlad Gudim
1
Una raíz cuadrada es una raíz cuadrada y una marca de verificación es una marca de verificación. Me parece como poner un pictograma de baño en la puerta de un vestuario.
Volker E.
1
@VolkerE. ¡Pero eso sería divertido!
Dave Newton
3

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> ✓
Nishant
fuente
0

podrías usar ⊕ o ⊗

Gabriel Solomon
fuente
1
Esos no son signos de marca, están encerrados en un círculo más / menos.
GKFX
0

Puede agregar un pequeño blanco con un GIF codificado Base64 ( generador en línea aquí ):

url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")

Con Chrome, por ejemplo, lo uso para diseñar el control de la casilla de verificación:

INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}

INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
-webkit-appearance: button;
width: 17px;
height: 17px;
margin-top: 1px;
cursor:pointer;
}

INPUT[type=checkbox]:checked
{
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

Si solo lo quisiera en una etiqueta IMG, haría la marca de verificación / marca de verificación como:

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">
Volomike
fuente
0

El uso de las fuentes WebDing o WingDing es la única forma de lograr el objetivo de este tema: debe funcionar a partir de IE 6.0.2900 . Por lo tanto, publicaría algunas aquí, así como algunas correcciones a las publicadas anteriormente:

Cross
<span style="font-family: Wingdings;">&#251;</span><br>
    
Check
<span style="font-family: Wingdings;">&#252;</span><br>

Crossed Checkbox
<span style="font-family: Wingdings;">&#253;</span><br>
    
Checked Checkbox
<span style="font-family: Wingdings;">&#254;</span><br>
    
Empty Checkbox
<span style="font-family: Wingdings;">&#168;</span><br>
    
Thick Check
<span style="font-family: Webdings;">&#97;</span>
Expandir fragmento

Referencia aquí: telas de alas

Dmitry Babich
fuente