Assinale o símbolo em HTML / XHTML

279

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.

html xhtml Vlad Gudim
fonte
1
Como um símbolo de marca de seleção deve se parecer?
31119 John Feminella
você viu isso: html-faq.com/htmlbasics/?specialcharacters
Sam Hasler
2
Sam, por favor, dê uma olhada na pergunta.
Vlad Gudim 18/03/09
@Totophil, eu sei que ele fala sobre as mesmas entidades, mas também sugere que o servidor envie um cabeçalho HTTP real Tipo de Conteúdo: text / html; charset = utf-8, bem como o problema que a fonte em uso pode não conter glifos para os caracteres usados.
Sam Hasler
Aqui estão algumas: amp-what.com/#q=check%20mark & # x2713 & # x2714
ndp

Respostas:

454

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: &#9744;]): uma caixa de seleção vazia (desmarcada)
  • ☑ ( 0x2611 [HTML decimal: &#9745;]): a versão marcada da caixa de seleção anterior
  • ✓ ( 0x2713 [decimal em HTML: &#10003;])
  • ✔ ( 0x2714 [decimal em HTML: &#10004;])

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.

John Feminella
fonte
1
Configuração corporativa: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
Vlad Gudim
O primeiro é uma caixa para mim, o resto funciona bem. Embora eu usasse uma imagem, apenas para ter certeza.
mbillard
6
Só para esclarecer, a primeira imagem deve ser uma caixa - é uma caixa de seleção vazia!
31119 John Feminella
1
@Totophil: Ah, tudo bem. Estou usando o Ubuntu, e a fonte sans padrão que configurei no FF possui esses glifos. No Windows, basta usar o mapa de caracteres para procurar esses glifos e ver se a fonte desejada os possui. Caso contrário, você precisará escolher um diferente.
31119 John Feminella
5
Vazio código da caixa decimal: 0x2610 -> 9744. tão código HTML será semelhante &#9744;mesma forma para caixa marcada: 0x2611 -> 9745 & código HTML&#9745;
Vikas
272

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: &#x2610;/ dec:): &#9744;urna (vazia, é assim que deve ser)
  • Hex (hex: &#x2611;/ dec:) &#9745;: urnas com cheque
  • Hex (hex: &#x2612;/ dec:) &#9746;: urna com x
  • ✓ (hex: &#x2713;/ dec:): &#10003;marca de seleção, equivalente à &checkmark;e &check;na maioria dos navegadores
  • ✔ (hex: &#x2714;/ dec:): &#10004;marca de seleção pesada
  • Hex (hex: &#x2717;/ dec:) &#10007;: cédula x
  • ✘ (hex: &#x2718;/ dec:): &#10008;cédula pesada x
  • 🗸 (⚠ hex: &#x1F5F8;/ dec &#128504;): marca de seleção leve (pouco suportada em 2017)
  • ✅ (⚠ hex: &#x2705;/ dec :): &#9989;marca de seleção branca pesada (suporte misto a partir de 2017)
  • ⚠ (⚠ hex: &#x1F5F4;/ dec :) &#128500;: script de cédula X (pouco suportado a partir de 2017)
  • ⚠ (⚠ hex: &#x1F5F6;/ dec :) &#128502;: cédula em negrito X (suporte insuficiente a partir de 2017)
  • ⮽ (⚠ hex: &#x2BBD;/ dec :) &#11197;: urna com luz X (pouco suportada em 2017)
  • ⚠ (⚠ hex: &#x1F5F5;/ dec :) &#128501;: urnas com o script X (pouco suportado em 2017)
  • ⚠ (⚠ hex: &#x1F5F9;/ dec :) &#128505;: urnas com cheque em negrito (pouco suporte a partir de 2017)
  • ⚠ (⚠ hex: &#x1F5F7;/ dec :) &#128503;: 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.

Bogdan Stăncescu
fonte
17

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.

quiabo
fonte
Não possui nenhuma das fontes, apenas o Lucida Sans Unicode que remotamente se parece com a fonte unicode, mas não possui os tiques.
Vlad Gudim 18/03/09
Em seguida, listar algumas fontes que têm um glifo para este caráter: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.
Gumbo
Gumbo, não funciona. Além disso, não tenho o Arial Unicode MS e o Lucida Grande instalados.
Vlad Gudim
É o mais perto que você vai chegar, mas infelizmente Lucida Sans Unicode não fornece U + 2713/2714.
bobince
13

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;
Stefan
fonte
11

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.

Drejc
fonte
6
Não precisamos de um controle, apenas uma indicação de que uma certa opção está disponível dentro de uma matriz. Usar um controle desabilitado estaria errado nesse caso.
Vlad Gudim
11

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.

Kai Noack
fonte
8

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.
bobince
fonte
8

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

rossum
fonte
4
Vale a pena notar que &check;(e &checkmark;) ambos avaliam &#10003;, qual é o que a resposta principal usa. É uma entidade de caracteres HTML5 e não funcionaria no IE6.
James Donnelly
5 
.className {
   content: '\&#x2713';
}

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

s-sharma
fonte
Não tenho certeza: w3schools.com/cssref/pr_gen_content.asp mostra comapatibily com firefox
s-sharma
todomvc.com/labs/architecture-examples/react verifica se está funcionando ou não, pois está usando conteúdo para marcar.
S-sharma
4
Se você deseja usar códigos utf-8 no conteúdo css, é possível:.class{ content: "\2713"; }
Morteza Ziyae 8/14
4

√ (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.

Ian Kemp
fonte
Obrigado! Raiz quadrada funciona, mas parece um pouco com err ... raiz quadrada? Mas acho que na ausência de alternativas isso provavelmente seria o mais próximo possível.
Vlad Gudim
1
Btw, especificar a meta tag define UTF-8 muito bem no meu IE, portanto, neste caso, esse não é o problema.
Vlad Gudim
1
Uma raiz quadrada é uma raiz quadrada e uma marca de seleção é uma marca de seleção. Parece-me como colocar um pictograma de banheiro na porta do vestiário.
Volker E.
1
@VolkerE. Mas isso seria hilário!
Dave Newton
3

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

você poderia usar ⊕ ou ⊗

Gabriel Solomon
fonte
1
Esses não são sinais de carrapato, estão circulados mais / menos.
GKFX
0

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">
Volomike
fonte
0

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>
Expandir snippet

Referência aqui: wingdings webdings

Dmitry Babich
fonte