Cochez le symbole en HTML / XHTML

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

Doit fonctionner avec IE 6.0.2900 sur une boîte XP, idéalement nous avons besoin qu’il soit multi-navigateur (IE + versions récentes de FF).

Les cases suivantes s’affichent bien que l’encodage du navigateur soit défini sur UTF-8 (META fonctionne correctement et non 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ée).

     ✓ ✔   

Toute aide appréciée.


Les travaux suivants sous IE 6.0 et IE 7:

     ü   

J’apprécierais que quelqu’un puisse vérifier sous FF sous Windows. Je suis quasiment sûr que cela ne fonctionnera pas dans une boîte autre que Windows.

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

  • ☐ ( 0x2610 dans Unicode hexadécimal [HTML decimal: ]): une case à cocher vide (non cochée)
  • ☑ ( 0x2611 [HTML decimal: ]): la version vérifiée de la case à cocher précédente
  • ✓ ( 0x2713 [Décimal HTML: ])
  • ✔ ( 0x2714 [HTML decimal: ])

Edit: Il semble y avoir une certaine confusion sur le premier symbole ici, ☐ / 0x2610. Ceci est une case à cocher vide (non cochée), donc si vous voyez une case, c’est comme ça que ça doit ressembler. C’est la contrepartie de 0x / 0x2611, qui est la version vérifiée.

Tout d’abord, vous devez vous rendre compte que vous n’avez pas besoin d’utiliser des entités HTML – tant que le codage de votre document HTML est déclaré UTF-8, vous pouvez simplement copier / coller ces symboles dans votre script de fichier / côté serveur / JavaScript / peu importe.

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

  • ☐ (hex: / dec: ): urne (vide, c’est comme ça que c’est supposé être)
  • Hex (hex: / dec: ): urne avec chèque
  • Hex (hex: / dec: ): urne avec x
  • ✓ (hex: / dec: ): coche, équivalent à et dans la plupart des navigateurs
  • ✔ (hex: / dec: ): coche lourde
  • Hex (hex: / dec: ): bulletin de vote x
  • Hex (hex: / dec: ): bulletin de vote lourd x
  • ⚠ (⚠ hex: 🗸 / dec 🗸 ): coche légère (mal supscope en 2017)
  • ✅ (⚠ hex: / dec: ): coche blanche lourde (support mixte à partir de 2017)
  • ⚠ (⚠ hex: 🗴 / dec: 🗴 ): script X (mal pris en charge en 2017)
  • ⚠ (⚠ hex: 🗶 / dec: 🗶 ): script en gras X (mal pris en charge en 2017)
  • ⚠ (⚠ hex: / dec: ): urne avec la lumière X (mal supscope à partir de 2017)
  • ⚠ (⚠ hex: 🗵 / dec: 🗵 ): urne avec le script X (mal supporté à partir de 2017)
  • ⚠ (⚠ hex: 🗹 / dec: 🗹 ): urne avec vérification en gras (mal pris en charge en 2017)
  • ⚠ (⚠ hex: 🗷 / dec: 🗷 ): urne avec un script en gras X (mal pris en charge en 2017)

Vérification des fonts 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 – copiez / collez simplement ceci dans la zone de texte de votre fournisseur Webfont et voyez quelles fonts prennent en charge les symboles de ticks.

La machine cliente a besoin d’une police appropriée comportant un glyphe pour que ce caractère puisse l’afficher. Mais Times New Roman ne le fait pas. Essayez Arial Unicode MS ou Lucida Grande à la place:

  ✓ ✔  

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

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

   

ou en css:

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

Pourquoi n’utilisez-vous pas l’élément checkbox d’entrée HTML en mode lecture seule

  and  

Je suppose que cela fonctionnera sur tous les navigateurs.

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

J’ai donc trouvé une solution possible en utilisant des 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’append en tant que données: image / gif. J’espère que cela t’aides.

bien que le codage du navigateur soit défini sur UTF-8

(Bien sûr, si vous utilisez des références de caractères numériques quel que soit l’encodage utilisé, les navigateurs obtiendront le bon code Unicode directement à partir du numéro.)

 ü 

J’apprécierais que quelqu’un puisse vérifier sous FF sous Windows. Je suis quasiment sûr que cela ne fonctionnera pas dans une boîte autre que Windows.

Ne marche pas pour moi dans Firefox 3, Opera et Safari. Curieusement, fonctionne dans l’autre navigateur Webkit, Chrome. Échec également sur Linux (évidemment, Wingdings n’y étant pas installé, il est installé sur les Mac, mais cela ne vous aide pas si Safari ne l’a pas).

En outre, il s’agit d’un piratage assez désagréable – 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, à moins que vous n’ayez 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», sur lequel vous ne devez pas vraiment compter. Donc à la fin je pense que vous devrez soit:

  • utiliser un caractère différent qui est mieux pris en charge (par exemple, «●» – puce , telle qu’elle est utilisée par SO), ou
  • utiliser une image, avec «✓» comme texte alt.

En arrivant très tard à la fête, j’ai trouvé ça (✓) a travaillé à l’opéra. Je ne l’ai pas testé sur d’autres navigateurs, mais cela pourrait être utile pour certaines personnes.

 .className { content: '\✓'; } 

En utilisant le contenu CSS Propriété, vous pouvez afficher la coche avec une image ou un autre symbole.

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

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

Solution utilisant Wingdings qui n’est pas basée sur unicode et ne fonctionne pas sous Linux sans Wingdings.

 Crossed Checkbox 
û
☒ Checked Checkbox
ü
☑ Cross
ý
✗ Check
þ

vous pouvez utiliser ⊕ ou ⊗