Symbole de coche en HTML / XHTML

279

Nous devons afficher un symbole de coche (✓ ou ✔) dans une application Web interne et aimerions idéalement éviter d'utiliser une image.

Doit fonctionner à partir d'IE 6.0.2900 sur une boîte XP, idéalement nous avons besoin que ce soit multi-navigateur (IE + versions récentes de FF).

Ce qui suit affiche des cases bien que définit le codage du navigateur sur UTF-8 (META fonctionne bien et pas le problème). La police par défaut est Times New Roman (peut être un problème, mais essayer Lucida Sans Unicode n'aide pas et je n'ai ni Arial Unicode MS, ni Lucida Grande installé).

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

Toute aide appréciée.

Les éléments suivants fonctionnent sous IE 6.0 et IE 7:

<html>
<head>

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

J'apprécierais si quelqu'un pouvait vérifier sous FF sur Windows. Je suis sûr que cela ne fonctionnera pas sur une boîte non Windows.

html xhtml Vlad Gudim
la source
1
À quoi doit ressembler un symbole de tique?
John Feminella
avez-vous vu ceci: html-faq.com/htmlbasics/?specialcharacters
Sam Hasler
2
Sam, veuillez jeter un œil à la question.
Vlad Gudim
@Totophil, je sais que cela parle des mêmes entités, mais cela suggère également que le serveur envoie un véritable en-tête HTTP Content-Type: text / html; charset = utf-8 ainsi que le problème que la police utilisée pourrait ne pas contenir glyphes pour les caractères utilisés.
Sam Hasler
En voici quelques exemples : amp-what.com/#q=check%20mark & # x2713 & # x2714
ndp

Réponses:

454

Je pense que vous utilisez des valeurs Unicode moins bien prises en charge, qui n'ont pas toujours de glyphes pour tous les points de code.
Essayez les caractères suivants:

  • ☐ ( 0x2610 en hexadécimal Unicode [décimal HTML: &#9744;]): une case à cocher vide (non cochée)
  • ☑ ( 0x2611 [décimal HTML: &#9745;]): la version cochée de la case à cocher précédente
  • ✓ ( 0x2713 [décimal HTML: &#10003;])
  • ✔ ( 0x2714 [décimal HTML: &#10004;])

Edit: Il semble y avoir une certaine confusion sur le premier symbole ici, ☐ / 0x2610. Il s'agit d'une case à cocher vide (non cochée), donc si vous voyez une boîte, c'est à cela qu'elle doit ressembler. C'est l'équivalent de ☑ / 0x2611, qui est la version vérifiée.

John Feminella
la source
1
Configuration d'entreprise: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
Vlad Gudim
Le premier est une boîte pour moi, le reste fonctionne très bien. Bien, j'utiliserais une image à la place, juste pour être sûr.
mbillard
6
Juste pour être clair, la première image est censée être une boîte - c'est une case à cocher vide!
John Feminella
1
@Totophil: Ah, d'accord. J'utilise Ubuntu, et la police sans par défaut que j'ai configurée dans FF a ces glyphes. Sous Windows, utilisez simplement la table des caractères pour rechercher ces glyphes et voir si la police souhaitée en possède. Sinon, vous devrez en choisir un autre.
John Feminella
5
Code décimal de la boîte vide: 0x2610 -> 9744. donc le code HTML ressemblera de &#9744;même pour la case cochée: 0x2611 -> 9745 & code HTML&#9745;
Vikas
272

Tout d'abord, vous devez vous rendre compte que vous n'avez pas réellement besoin d'utiliser des entités HTML - tant que l'encodage de votre document HTML est déclaré correctement en UTF-8, vous pouvez simplement copier / coller ces symboles dans votre fichier / script côté serveur / JavaScript / quoi que ce soit.

Cela dit, voici la liste exhaustive de tous les caractères UTF-8 / entités HTML pertinents liés à ce sujet:

  • ☐ (hex: &#x2610;/ dec:): &#9744;urne (vide, c'est comme ça que ça devrait être)
  • ☑ (hex: &#x2611;/ dec:) &#9745;: urne avec chèque
  • ☒ (hex: &#x2612;/ dec:) &#9746;: urne avec x
  • ✓ (hex: &#x2713;/ dec:): &#10003;coche, équivalente à &checkmark;et &check;dans la plupart des navigateurs
  • ✔ (hex: &#x2714;/ dec:): &#10004;coche lourde
  • ✗ (hex: &#x2717;/ dec :) &#10007;: bulletin de vote x
  • ✘ (hex: &#x2718;/ dec:): &#10008;scrutin lourd x
  • 🗸 (⚠ hex: &#x1F5F8;/ dec &#128504;): coche claire (mal pris en charge en 2017)
  • ✅ (⚠ hex: &#x2705;/ dec :): &#9989;coche blanche épaisse (support mixte à partir de 2017)
  • 🗴 (⚠ hex: &#x1F5F4;/ dec :): &#128500;script de vote X (mal pris en charge en 2017)
  • 🗶 (⚠ hex: &#x1F5F6;/ dec :): &#128502;script de vote en gras X (mal pris en charge en 2017)
  • ⮽ (⚠ hex: &#x2BBD;/ dec :) &#11197;: urne avec lumière X (mal supporté en 2017)
  • 🗵 (⚠ hex: &#x1F5F5;/ dec :) &#128501;: urne avec script X (mal pris en charge en 2017)
  • 🗹 (⚠ hex: &#x1F5F9;/ dec :) &#128505;: urne avec chèque en gras (mal pris en charge en 2017)
  • 🗷 (⚠ hex: &#x1F5F7;/ dec :) &#128503;: urne avec script en gras X (mal pris en charge en 2017)

Vérification des polices Web pour les symboles de graduation? Voici un exemple prêt à l'emploi pour les plus courants: A☐B☑C☒D✓E✔F✗G✘H- il suffit de copier / coller ceci dans l'exemple de zone de texte de votre fournisseur de polices Web et de voir quelles polices prennent en charge les symboles de tick.

Bogdan Stăncescu
la source
17

La machine cliente a besoin d'une police appropriée qui a un glyphe pour ce caractère pour l'afficher. Mais Times New Roman ne le fait pas. Essayez plutôt Arial Unicode MS ou Lucida Grande :

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

Cela fonctionne pour moi sur Windows XP dans IE 5.5, IE 6.0, FF 3.0.6.

Gombo
la source
N'ont aucune police, seulement Lucida Sans Unicode qui ressemble à distance à une police unicode mais qui n'a pas les graduations.
Vlad Gudim
Ensuite , la liste des polices qui ont un glyphe pour ce personnage: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.
Gumbo
Gumbo, ça ne marche pas. De plus, je n'ai pas installé Arial Unicode MS et Lucida Grande.
Vlad Gudim
C'est à peu près aussi proche que possible, mais malheureusement, Lucida Sans Unicode ne fournit pas U + 2713/2714.
bobince
13

J'utilise normalement la police fontawesome ( http://fontawesome.io/icon/check/ ), vous pouvez l'utiliser dans des fichiers html: 

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

ou en css:

content: "\f00c";
font-family: FontAwesome;
Stefan
la source
11

Pourquoi n'utilisez-vous pas l'élément de case à cocher d'entrée HTML en mode lecture seule

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

Je suppose que cela fonctionnera sur tous les navigateurs.

Drejc
la source
6
Nous n'avons pas besoin d'un contrôle, juste une indication qu'une certaine option est disponible dans une matrice. L'utilisation d'un contrôle désactivé serait incorrect dans ce cas.
Vlad Gudim
11

Je rencontre le même problème et aucune des suggestions n'a fonctionné (Firefox sur Windows XP).

J'ai donc trouvé une solution de contournement possible en utilisant les données d'image pour afficher une petite coche:

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

Bien sûr, vous pouvez créer votre propre image de coche et utiliser un convertisseur pour l'ajouter en tant que données: image / gif. J'espère que cela t'aides.

Kai Noack
la source
8

bien que le codage du navigateur soit UTF-8

(Si vous utilisez des références de caractères numériques, quel que soit le codage utilisé, les navigateurs obtiendront le point de code Unicode directement à partir du numéro.)

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

J'apprécierais si quelqu'un pouvait vérifier sous FF sur Windows. Je suis sûr que cela ne fonctionnera pas sur une boîte non Windows.

Échoue pour moi dans Firefox 3, Opera et Safari. Curieusement, fonctionne dans l'autre navigateur Webkit, Chrome. Échoue également sous Linux (évidemment, comme Wingdings n'est pas installé là-bas; il est installé sur Mac, mais cela ne vous aide pas si Safari ne l'a pas).

C'est aussi un hack assez méchant - ce personnage est à toutes fins utiles «ü» et apparaîtra de cette façon à des choses comme les moteurs de recherche, ou si le texte est copié-collé. Les points de code Unicode appropriés sont la voie à suivre, sauf si vous n'avez vraiment aucune alternative.

Le problème est qu'aucune police fournie avec Windows ne fournit U + 2713 CHECK MARK ('✓'). Le seul que vous êtes susceptible de trouver sur une machine Windows est «Arial Unicode MS», qui n'est pas vraiment fiable. Donc à la fin, je pense que vous devrez soit:

  • utiliser un caractère différent qui est mieux pris en charge (par exemple, "●" - puce , tel qu'utilisé par SO), ou
  • utilisez une image, avec «✓» comme texte alternatif.
bobince
la source
8

Arrivant très tard à la fête, j'ai trouvé que &check;(✓) fonctionnait à l'opéra. Je ne l'ai testé sur aucun autre navigateur, mais cela pourrait être utile pour certaines personnes.

Rossum
la source
4
Il convient de noter que &check;(et &checkmark;) les deux sont évalués &#10003;, ce que la réponse principale utilise. C'est une entité de caractère HTML5 et ne fonctionnerait pas dans IE6.
James Donnelly
5 
.className {
   content: '\&#x2713';
}

En utilisant la propriété de contenu CSS, vous pouvez afficher une coche avec une image ou un autre code.

s-sharma
la source
Pas sûr: w3schools.com/cssref/pr_gen_content.asp montre la compatibilité avec Firefox
s-sharma
todomvc.com/labs/architecture-examples/react vérifier si cela fonctionne ou non car ils utilisent du contenu pour la coche.
s-sharma
4
Si vous souhaitez utiliser des codes utf-8 dans le contenu CSS, de cette façon, il est possible:.class{ content: "\2713"; }
Morteza Ziyae
4

Est-ce que √ (symbole de racine carrée, & # 8730;) suffirait?

Vous pouvez également vous assurer de définir l'en- Content-Type:tête avant d' envoyer des données au navigateur. La simple spécification de la <meta>balise de type de contenu peut ne pas être suffisante pour encourager les navigateurs à utiliser le jeu de caractères correct.

Ian Kemp
la source
Merci! La racine carrée fonctionne, mais ressemble un peu à errr ... racine carrée? Mais je suppose qu'en l'absence d'alternative, ce serait probablement aussi proche que possible.
Vlad Gudim
1
Btw, en spécifiant la balise meta définit bien UTF-8 sur le mien IE, donc dans ce cas, ce n'est pas le problème.
Vlad Gudim
1
Une racine carrée est une racine carrée et une coche est une coche. Je me sens comme mettre un pictogramme de toilette sur une porte de vestiaire.
Volker E.
1
@VolkerE. Mais ce serait hilarant!
Dave Newton
3

Solution utilisant Wingdings qui n'est pas basée sur Unicode et ne fonctionne pas sous Linux sans Wingdings installé.

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
la source
0

vous pourriez utiliser ⊕ ou ⊗

Gabriel Solomon
la source
1
Ce ne sont pas des signes de coche, ils sont encerclés plus / moins.
GKFX
0

Vous pouvez en ajouter un petit blanc avec un GIF encodé en Base64 ( générateur en ligne ici ):

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

Avec Chrome, par exemple, je l'utilise pour styliser le contrôle de la case à cocher:

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 vous le vouliez simplement dans une balise IMG, vous feriez la coche / coche comme:

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

L' utilisation des polices WebDing ou WingDing est le seul moyen d'atteindre l'objectif de cette rubrique: elle doit fonctionner à partir d'IE 6.0.2900 . Par conséquent, j'en publierais ici, ainsi que des corrections à celles ci-dessus:

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>
Développer l'extrait

Référence ici: webdings wingdings

Dmitry Babich
la source