Assinale o símbolo em HTML / XHTML

Precisamos exibir um símbolo de marca de seleção (✓ ou ✔) em um aplicativo Web interno e, idealmente, evitamos usar uma imagem.

Tem que trabalhar a partir do IE 6.0.2900 em uma caixa XP, idealmente precisamos que ele seja entre navegadores (IE + versões recentes do FF).

O seguinte exibe caixas, embora defina a codificação do navegador para UTF-8 (o META funciona bem e não é o problema). A fonte padrão é Times New Roman (pode ser um problema, mas experimentar o Lucida Sans Unicode não ajuda e não tenho o Arial Unicode MS nem o Lucida Grande instalado).

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

Qualquer ajuda apreciada.

O seguinte funciona no IE 6.0 e IE 7:

<html>
<head>

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

Eu apreciaria se alguém pudesse verificar em FF no Windows. Tenho certeza de que não funcionará em uma caixa que não seja do Windows.

Acho que você está usando valores Unicode com menos suporte, que nem sempre têm glifos para todos os pontos de código.
Tente os seguintes caracteres:

• ☐ ( 0x2610 em hexadecimal Unicode [HTML decimal: ☐]): uma caixa de seleção vazia (desmarcada)
• ☑ ( 0x2611 [HTML decimal: ☑]): a versão marcada da caixa de seleção anterior
• ✓ ( 0x2713 [decimal em HTML: ✓])
• ✔ ( 0x2714 [decimal em HTML: ✔])

Edit: Parece haver alguma confusão sobre o primeiro símbolo aqui, ☐ / 0x2610. Esta é uma caixa de seleção vazia (desmarcada); portanto, se você vir uma caixa, é assim que deve parecer. É a contrapartida de ☑ / 0x2611, que é a versão verificada.

Primeiro, você deve perceber que não precisa realmente usar entidades HTML - desde que a codificação do seu documento HTML seja declarada corretamente como UTF-8, você pode simplesmente copiar / colar esses símbolos no arquivo / script no servidor / JavaScript / qualquer que seja.

Dito isto, aqui está a lista exaustiva de todos os caracteres UTF-8 / entidades HTML relevantes relacionados a este tópico:

• Hex (hex: ☐/ dec:): ☐urna (vazia, é assim que deve ser)
• Hex (hex: ☑/ dec:) ☑: urnas com cheque
• Hex (hex: ☒/ dec:) ☒: urna com x
• ✓ (hex: ✓/ dec:): ✓marca de seleção, equivalente à ✓e ✓na maioria dos navegadores
• ✔ (hex: ✔/ dec:): ✔marca de seleção pesada
• Hex (hex: ✗/ dec:) ✗: cédula x
• ✘ (hex: ✘/ dec:): ✘cédula pesada x
• 🗸 (⚠ hex: 🗸/ dec 🗸): marca de seleção leve (pouco suportada em 2017)
• ✅ (⚠ hex: ✅/ dec :): ✅marca de seleção branca pesada (suporte misto a partir de 2017)
• ⚠ (⚠ hex: 🗴/ dec :) 🗴: script de cédula X (pouco suportado a partir de 2017)
• ⚠ (⚠ hex: 🗶/ dec :) 🗶: cédula em negrito X (suporte insuficiente a partir de 2017)
• ⮽ (⚠ hex: ⮽/ dec :) ⮽: urna com luz X (pouco suportada em 2017)
• ⚠ (⚠ hex: 🗵/ dec :) 🗵: urnas com o script X (pouco suportado em 2017)
• ⚠ (⚠ hex: 🗹/ dec :) 🗹: urnas com cheque em negrito (pouco suporte a partir de 2017)
• ⚠ (⚠ hex: 🗷/ dec :) 🗷: urna com script em negrito X (pouco suportado em 2017)

Verificando fontes da Web para símbolos de escala? Aqui está uma amostra pronta para usar para as mais comuns: A☐B☑C☒D✓E✔F✗G✘H- basta copiar / colar isso na caixa de texto de amostra do seu provedor de fontes da web e ver quais fontes suportam quais símbolos de marca.

A máquina cliente precisa de uma fonte adequada que possua um glifo para que esse caractere seja exibido. Mas o Times New Roman não. Tente Arial Unicode MS ou Lucida Grande :

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

Isso funciona para mim no Windows XP no IE 5.5, IE 6.0, FF 3.0.6.

Eu normalmente uso a fonte fontawesome ( http://fontawesome.io/icon/check/ ), você pode usá-la em arquivos html:

 <i class="fa fa-check"></i>

ou em css:

content: "\f00c";
font-family: FontAwesome;

Por que você não usa o elemento da caixa de seleção de entrada HTML no modo somente leitura

<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />

Presumo que isso funcione em todos os navegadores.

Eu me deparo com o mesmo problema e nenhuma das sugestões funcionou (Firefox no Windows XP).

Então, eu encontrei uma possível solução alternativa usando dados de imagem para exibir uma pequena marca de seleção:

span:before {
    content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}

Claro que você pode criar sua própria imagem de marca de seleção e usar um conversor para adicioná-la como dados: imagem / gif. Espero que isto ajude.

embora defina a codificação do navegador para UTF-8

(Se você estiver usando referências de caracteres numéricos, é claro, não importa qual codificação está sendo usada, os navegadores obterão o ponto de código Unicode correto diretamente do número.)

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

Eu apreciaria se alguém pudesse verificar em FF no Windows. Tenho certeza de que não funcionará em uma caixa que não seja do Windows.

Me falha no Firefox 3, Opera e Safari. Curiosamente, funciona no outro navegador Webkit, o Chrome. Também falha no Linux (obviamente, como o Wingdings não está instalado lá; está instalado nos Macs, mas isso não ajuda se o Safari não o tiver).

Também é um truque bastante desagradável - esse personagem é para todos os efeitos "ü" e aparecerá assim para coisas como mecanismos de pesquisa ou se o texto for copiado e colado. Os pontos de código Unicode adequados são o caminho a menos, a menos que você realmente não tenha alternativa.

O problema é que nenhuma fonte incluída no Windows fornece U + 2713 CHECK MARK ('✓'). O único que você provavelmente encontrará em uma máquina Windows é o "Arial Unicode MS", do qual não se pode confiar. Então, no final, acho que você terá que:

• use um caractere diferente que seja melhor suportado (por exemplo, '●' - marcador , conforme usado pelo SO), ou
• use uma imagem, com '✓' como texto alternativo.

Chegando muito tarde à festa, descobri que ✓(✓) funcionava no Opera. Não testei em nenhum outro navegador, mas pode ser útil para algumas pessoas.

.className {
   content: '\&#x2713';
}

Usando a propriedade CSS content, você pode mostrar carrapato com uma imagem ou outro código.

√ (símbolo de raiz quadrada, & # 8730;) seria suficiente?

Como alternativa, verifique se você está configurando o Content-Type:cabeçalho antes de enviar dados para o navegador. Apenas especificar a <meta>tag do tipo de conteúdo pode não ser suficiente para incentivar os navegadores a usar o conjunto de caracteres correto.

Solução usando Wingdings que não é baseado em unicode e não funciona no Linux sem o 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> ✓

você poderia usar ⊕ ou ⊗

Você pode adicionar um pouco de branco com um GIF codificado em Base64 ( gerador on-line aqui ):

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

Com o Chrome, por exemplo, eu o uso para estilizar o controle da caixa de seleção:

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;
}

Se você apenas quisesse isso em uma tag IMG, faria a marca de seleção / marca de seleção como:

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

Usando Webding ou Wingding fontes é a única maneira de alcançar o objetivo deste tópico: ele tem que começar a trabalhar com o IE 6.0.2900 . Portanto, eu publicaria alguns aqui, bem como algumas correções postadas acima:

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>

Referência aqui: wingdings webdings