Häkchensymbol in HTML / XHTML

279

Wir brauchen ein angezeigten tick Symbol (✓ oder ✔) innerhalb eines internen Web - App und würden im Idealfall wie mit einem Bild zu vermeiden.

Muss ab IE 6.0.2900 auf einer XP-Box funktionieren, idealerweise muss es browserübergreifend sein (IE + aktuelle Versionen von FF).

Im Folgenden werden Felder angezeigt, obwohl die Browser-Codierung auf UTF-8 eingestellt ist (META funktioniert einwandfrei und nicht das Problem). Die Standardschriftart ist Times New Roman (möglicherweise ein Problem, aber das Ausprobieren von Lucida Sans Unicode hilft nicht und ich habe weder Arial Unicode MS noch Lucida Grande installiert).

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

Jede Hilfe geschätzt.

Folgendes funktioniert unter IE 6.0 und IE 7:

<html>
<head>

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

Ich würde mich freuen, wenn jemand unter FF unter Windows nachsehen könnte. Ich bin mir ziemlich sicher, dass es auf einer Nicht-Windows-Box nicht funktioniert.

html  xhtml 
— Vlad Gudim
quelle
1
Wie soll ein Häkchensymbol aussehen?
— John Feminella
— Sam Hasler
2
Sam, bitte schau dir die Frage an.
— Vlad Gudim
@Totophil, ich weiß, dass es sich um dieselben Entitäten handelt, aber es wird auch vorgeschlagen, dass der Server einen tatsächlichen HTTP-Header sendet. Inhaltstyp: text / html; charset = utf-8 sowie das Problem, das die verwendete Schriftart möglicherweise nicht enthält Glyphen für die verwendeten Zeichen.
— Sam Hasler
Hier sind ein paar: amp-what.com/#q=check%20mark & # x2713 & # x2714
— ndp

Antworten:

454

Ich denke, Sie verwenden weniger gut unterstützte Unicode-Werte, die nicht immer Glyphen für alle Codepunkte enthalten.
Probieren Sie die folgenden Zeichen aus:

  • ☐ ( 0x2610 in Unicode hexadezimal [HTML dezimal: &#9744;]): Ein leeres (nicht aktiviertes ) Kontrollkästchen
  • ☑ ( 0x2611 [HTML-Dezimalzahl: &#9745;]): Die aktivierte Version des vorherigen Kontrollkästchens
  • ✓ ( 0x2713 [HTML-Dezimalzahl: &#10003;])
  • ✔ ( 0x2714 [HTML-Dezimalzahl: &#10004;])

Bearbeiten: Es scheint einige Verwirrung über das erste Symbol hier zu geben, ☐ / 0x2610. Dies ist ein leeres (deaktiviertes) Kontrollkästchen. Wenn Sie also ein Kontrollkästchen sehen, soll es so aussehen. Es ist das Gegenstück zu ☑ / 0x2611, der überprüften Version.

— John Feminella
quelle
1
Unternehmens-Setup: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
— Vlad Gudim
Das erste ist eine Schachtel für mich, der Rest funktioniert gut. Obwohl ich stattdessen ein Bild verwenden würde, nur um sicherzugehen.
— Mbillard
6
Um ganz klar zu sein, das erste Bild soll ein Kästchen sein - es ist ein leeres Kontrollkästchen!
— John Feminella
1
@Totophil: Ah, okay. Ich verwende Ubuntu und die Standard-Sans-Schriftart, die ich in FF konfiguriert habe, enthält diese Glyphen. Verwenden Sie in Windows einfach die Zeichentabelle, um diese Glyphen nachzuschlagen und festzustellen, ob Ihre gewünschte Schriftart sie enthält. Wenn nicht, müssen Sie einen anderen auswählen.
— John Feminella
5
Leerer Box-Dezimalcode: 0x2610 -> 9744. HTML-Code sieht also ähnlich aus wie &#9744;bei aktiviertem Kontrollkästchen: 0x2611 -> 9745 & HTML-Code&#9745;
— Vikas
272

Zunächst sollten Sie sich darüber im Klaren sein, dass Sie keine HTML-Entitäten verwenden müssen. Solange die Codierung Ihres HTML-Dokuments ordnungsgemäß als UTF-8 deklariert ist, können Sie diese Symbole einfach kopieren / in Ihre Datei / das serverseitige Skript / einfügen. JavaScript / was auch immer.

Trotzdem finden Sie hier eine vollständige Liste aller relevanten UTF-8-Zeichen / HTML-Entitäten, die sich auf dieses Thema beziehen:

  • ☐ (hex: &#x2610;/ dec :) &#9744;: Wahlurne (leer, so soll es sein)
  • ☑ (hex: &#x2611;/ dec :) &#9745;: Wahlurne mit Scheck
  • ☒ (hex: &#x2612;/ dec :) &#9746;: Wahlurne mit x
  • ✓ (hex: &#x2713;/ dec :) &#10003;: Häkchen, entspricht &checkmark;und &check;in den meisten Browsern
  • ✔ (hex: &#x2714;/ dec :) &#10004;: schweres Häkchen
  • ✗ (hex: &#x2717;/ dec :) &#10007;: Stimmzettel x
  • ✘ (hex: &#x2718;/ dec :) &#10008;: schwerer Stimmzettel x
  • 🗸 (⚠ hex: &#x1F5F8;/ dec &#128504;): leichtes Häkchen (ab 2017 schlecht unterstützt)
  • ✅ (⚠ hex: &#x2705;/ dec :) &#9989;: weißes schweres Häkchen (gemischte Unterstützung ab 2017)
  • 🗴 (⚠ hex: &#x1F5F4;/ dec :): Wahlskript &#128500;X (ab 2017 schlecht unterstützt)
  • 🗶 (⚠ hex: &#x1F5F6;/ dec :): &#128502;Fettdruck X (schlecht unterstützt ab 2017)
  • ⮽ (⚠ hex: &#x2BBD;/ dec :) &#11197;: Wahlurne mit hellem X (ab 2017 schlecht unterstützt)
  • 🗵 (⚠ hex: &#x1F5F5;/ dec :) &#128501;: Wahlurne mit Skript X (ab 2017 schlecht unterstützt)
  • 🗹 (⚠ hex: &#x1F5F9;/ dec :) &#128505;: Wahlurne mit fettem Scheck (ab 2017 schlecht unterstützt)
  • 🗷 (⚠ hex: &#x1F5F7;/ dec :) &#128503;: Wahlurne mit fettem Skript X (ab 2017 schlecht unterstützt)

Web-Schriftarten auf Häkchensymbole überprüfen? Hier ist ein gebrauchsfertiges Beispiel für die gängigsten: A☐B☑C☒D✓E✔F✗G✘H- Kopieren Sie es einfach in das Beispieltextfeld Ihres Webfont-Anbieters und sehen Sie, welche Schriftarten welche Häkchensymbole unterstützen.

— Bogdan Stăncescu
quelle
17

Der Client-Computer benötigt eine geeignete Schriftart mit einem Symbol für dieses Zeichen, um es anzuzeigen. Aber Times New Roman nicht. Versuchen Sie stattdessen Arial Unicode MS oder Lucida Grande :

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

Dies funktioniert für mich unter Windows XP in IE 5.5, IE 6.0, FF 3.0.6.

— Gumbo
quelle
Keine der beiden Schriftarten, nur Lucida Sans Unicode, die aus der Ferne wie eine Unicode-Schrift aussieht, aber keine Häkchen aufweist.
— Vlad Gudim
Listen Sie dann einige Schriftarten auf, die eine Glyphe für dieses Zeichen enthalten : font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.
— Gumbo
Gumbo, funktioniert nicht. Außerdem habe ich Arial Unicode MS und Lucida Grande nicht installiert.
— Vlad Gudim
Es ist ungefähr so ​​nah wie möglich, aber leider liefert Lucida Sans Unicode kein U + 2713/2714.
— Bobince
13

Normalerweise verwende ich die Schriftart fontawesome ( http://fontawesome.io/icon/check/ ). Sie können sie in HTML-Dateien verwenden: 

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

oder in CSS:

content: "\f00c";
font-family: FontAwesome;
— stefan
quelle
11

Warum verwenden Sie das Kontrollkästchen für die HTML-Eingabe nicht im schreibgeschützten Modus?

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

Ich gehe davon aus, dass dies in allen Browsern funktioniert.

— Drejc
quelle
6
Wir brauchen kein Steuerelement, nur einen Hinweis darauf, dass eine bestimmte Option in einer Matrix verfügbar ist. Die Verwendung einer deaktivierten Steuerung wäre in diesem Fall falsch.
— Vlad Gudim
11

Ich habe das gleiche Problem und keiner der Vorschläge hat funktioniert (Firefox unter Windows XP).

Daher habe ich eine mögliche Problemumgehung gefunden, bei der Bilddaten verwendet wurden, um ein kleines Häkchen anzuzeigen:

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

Natürlich können Sie Ihr eigenes Häkchenbild erstellen und es mit einem Konverter als Daten hinzufügen: image / gif. Hoffe das hilft.

— Kai Noack
quelle
8

obwohl die Browser-Codierung auf UTF-8 gesetzt wird

(Wenn Sie numerische Zeichenreferenzen verwenden, spielt es natürlich keine Rolle, welche Codierung verwendet wird, Browser erhalten den richtigen Unicode-Codepunkt direkt von der Nummer.)

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

Ich würde mich freuen, wenn jemand unter FF unter Windows nachsehen könnte. Ich bin mir ziemlich sicher, dass es auf einer Nicht-Windows-Box nicht funktioniert.

Schlägt für mich in Firefox 3, Opera und Safari fehl. Funktioniert seltsamerweise im anderen Webkit-Browser Chrome. Scheitert auch unter Linux (offensichtlich, da Wingdings dort nicht installiert ist; es ist auf Macs installiert, aber das hilft Ihnen nicht, wenn Safari es nicht hat).

Es ist auch ein ziemlich böser Hack - dieser Charakter ist in jeder Hinsicht "ü" und wird für Dinge wie Suchmaschinen oder wenn der Text kopiert und eingefügt wird, so erscheinen. Richtige Unicode-Codepunkte sind der richtige Weg, es sei denn, Sie haben wirklich keine Alternative.

Das Problem ist, dass keine mit Windows gebündelte Schriftart U + 2713 CHECK MARK ('✓') liefert. Das einzige, was Sie wahrscheinlich auf einem Windows-Computer finden, ist "Arial Unicode MS", auf das man sich nicht wirklich verlassen kann. Am Ende denke ich, dass Sie entweder:

  • Verwenden Sie ein anderes Zeichen, das besser unterstützt wird (z. B. '●' - Aufzählungszeichen , wie es von SO verwendet wird), oder
  • Verwenden Sie ein Bild mit '✓' als Alternativtext.
— Bobince
quelle
8

Als ich sehr spät zur Party kam, stellte ich fest, dass &check;(✓) in Opera funktionierte. Ich habe es in keinem anderen Browser getestet, aber es könnte für einige Leute nützlich sein.

— Rossum
quelle
4
Es ist erwähnenswert, dass &check;(und &checkmark;) beide bewerten &#10003;, was in der Top-Antwort verwendet wird. Es ist eine HTML5- Zeichenentität und würde in IE6 nicht funktionieren.
— James Donnelly
5 
.className {
   content: '\&#x2713';
}

Mit der Eigenschaft CSS-Inhalt können Sie ein Häkchen mit einem Bild oder einem anderen Codesign anzeigen.

— S-Sharma
quelle
Nicht sicher: w3schools.com/cssref/pr_gen_content.asp zeigt kompatibel mit Firefox
— s-Sharma
todomvc.com/labs/architecture-examples/react Überprüfen Sie, ob es funktioniert oder nicht, da Inhalte für Häkchen verwendet werden.
— S-Sharma
4
Wenn Sie utf-8-Codes in CSS-Inhalten verwenden möchten, ist dies folgendermaßen möglich:.class{ content: "\2713"; }
— Morteza Ziyae
4

Würde √ (Quadratwurzelsymbol & # 8730;) ausreichen?

Stellen Sie alternativ sicher, dass Sie den Content-Type:Header festlegen, bevor Sie Daten an den Browser senden. Die bloße Angabe des <meta>Tags für den Inhaltstyp reicht möglicherweise nicht aus, um Browser zur Verwendung des richtigen Zeichensatzes zu ermutigen.

— Ian Kemp
quelle
Vielen Dank! Quadratwurzel funktioniert, sieht aber ein bisschen aus wie errr ... Quadratwurzel? Aber ich denke, in Abwesenheit einer Alternative wäre das wahrscheinlich so nah wie es nur geht.
— Vlad Gudim
1
Übrigens, wenn Sie das Meta-Tag angeben, wird UTF-8 in meinem IE gut eingestellt. In diesem Fall ist dies also nicht das Problem.
— Vlad Gudim
1
Eine Quadratwurzel ist eine Quadratwurzel und ein Häkchen ist ein Häkchen. Fühlt sich für mich an, als würde ich ein Toilettenpiktogramm auf eine Umkleidekabintür kleben.
— Volker E.
1
@ VolkerE. Aber das wäre lustig!
— Dave Newton
3

Lösung mit Wingdings, die nicht auf Unicode basiert und unter Linux ohne installierte Wingdings nicht funktioniert.

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
quelle
0

Sie können ein kleines weißes mit einem Base64-codierten GIF hinzufügen ( Online-Generator hier ):

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

Mit Chrome verwende ich es beispielsweise, um das Kontrollkästchen-Steuerelement zu formatieren:

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

Wenn Sie es nur in einem IMG-Tag haben möchten, würden Sie das Häkchen / Häkchen wie folgt setzen:

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

Die Verwendung von WebDing- oder WingDing- Schriftarten ist der einzige Weg, um das Ziel dieses Themas zu erreichen: Es muss ab IE 6.0.2900 funktionieren . Daher würde ich einige hier posten sowie einige Korrekturen zu den oben geposteten:

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>
Erweitern Sie das Snippet

Referenz hier: Wingdings Webdings

— Dmitry Babich
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.