HTML-Zeichencodes für dieses ▲ oder dieses ▼

Wie lauten die HTML-Entitätszeichencodes für diesen Aufwärtspfeil (▲) und seine herabschauende Hundeversion (▼) ?

Ich habe GIFs verwendet, um diese Pfeile darzustellen, da ich ihre Codes nicht kenne.

Die großen und kleinen schwarzen Dreiecke, die den 4 Richtungen zugewandt sind, können folgendermaßen dargestellt werden:

▲ ▲

▴ ▴

▶ ▶

▸ ▸

► ►

▼ ▼

▾ ▾

◀ ◀

◂ ◂

◄ ◄

• ▲ ist U+25B2 SCHWARZES NACH OBEN ZEIGENDREIECK und seine Dezimalzeicheneinheit ist ▲
• ▼ ist U+25BC SCHWARZES NACH UNTEN ZEIGENDREIECK und seine Dezimalzeicheneinheit ist ▼

Ich benutze normalerweise der ausgezeichnete Gucharmap um Unicode-Zeichen nachzuschlagen. Es ist auf allen neueren Linux-Installationen mit Gnome unter dem Namen “Character Map” installiert. Ich kenne keine gleichwertigen Tools für Windows oder Mac OS X, aber auf der Homepage sind einige aufgeführt.

Es gibt mehrere korrekte Möglichkeiten, ein nach unten und nach oben zeigendes Dreieck anzuzeigen.

Methode 1: Verwenden Sie eine dezimale HTML-Entität

HTML:

▲
▼

Methode 2: Verwenden Sie eine hexadezimale HTML-Entität

HTML:

▲
▼

Methode 3: Zeichen direkt verwenden

HTML:

▲
▼

Methode 4: Verwenden Sie CSS

HTML:

<span class="icon-up"></span>
<span class="icon-down"></span>

CSS:

.icon-up:before {
    content: "\25B2";
}

.icon-down:before {
    content: "\25BC";
}

Jede dieser drei Methoden sollte die gleiche Ausgabe haben. Für andere Symbole gibt es die gleichen drei Optionen. Einige haben sogar eine vierte Option, mit der Sie eine Zeichenfolgen-basierte Referenz verwenden können (z. ♥ ♥ anzuzeigen).

Sie können eine Referenz-Website wie verwenden Unicode-table.com um herauszufinden, welche Symbole in UNICODE unterstützt werden und welchen Codes sie entsprechen. Beispielsweise finden Sie die Werte für das nach unten zeigende Dreieck bei http://unicode-table.com/en/25BC/.

Beachten Sie, dass diese Methoden nur für Symbole ausreichen, die standardmäßig in jedem Browser verfügbar sind. Bei Symbolen wie ☃,❄,★,☂,☭,⎗ oder ⎘ ist dies weit weniger wahrscheinlich. Es ist zwar möglich, andere UNICODE-Symbole browserübergreifend zu unterstützen, aber das Verfahren ist etwas komplizierter.

Wenn Sie wissen möchten, wie Sie Unterstützung für weniger gebräuchliche UNICODE-Zeichen hinzufügen können, lesen Sie Erstellen Sie Webfonts mit Unicode Supplementary Multilingual Plane-Symbolen für weitere Informationen darüber, wie Sie dies tun können.

Hintergrundbilder

Eine ganz andere Strategie ist die Verwendung von Hintergrundbildern anstelle von Schriftarten. Für eine optimale Leistung ist es am besten, das Bild in Ihre CSS-Datei einzubetten, indem Sie es basiskodieren, wie von eg erwähnt. @weasel5i2 und @Obsidian. Ich würde die Verwendung von SVG anstelle von GIF empfehlen, aber das ist sowohl für die Leistung als auch für die Schärfe Ihrer Symbole besser.

Der folgende Code ist die Base64- und SVG-Version von Symbol :

/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=

Wann Sie Hintergrundbilder oder Schriftarten verwenden sollten

Für viele Anwendungsfälle sind SVG-basierte Hintergrundbilder und Symbolschriften in Bezug auf Leistung und Flexibilität weitgehend gleichwertig. Berücksichtigen Sie die folgenden Unterschiede, um zu entscheiden, welche Sie auswählen sollten:

SVG-Bilder

• Sie können mehrere Farben haben
• Sie können ihr eigenes CSS einbetten und/oder vom HTML-Dokument gestaltet werden
• Sie können als separate Datei geladen, in CSS eingebettet UND in HTML eingebettet werden
• Jedes Symbol wird durch XML-Code oder Base64-Code dargestellt. Sie können das Zeichen nicht direkt in Ihrem Code-Editor verwenden oder eine HTML-Entität verwenden
• Die mehrfache Verwendung desselben Symbols impliziert eine Duplizierung des Symbols, wenn XML-Code in HTML eingebettet ist. Beim Einbetten der Datei in das CSS oder beim Laden als separate Datei ist keine Duplizierung erforderlich
• Sie können nicht verwenden color, font-size, line-height, background-color oder andere schriftartbezogene Stilregeln, um die Anzeige Ihres Symbols zu ändern, aber Sie können verschiedene Komponenten des Symbols einzeln als Formen referenzieren.
• Sie benötigen einige Kenntnisse in SVG und/oder base64-Codierung
• Eingeschränkte oder keine Unterstützung in alten Versionen von IE

Icon-Fonts

• Ein Symbol kann nur eine Füllfarbe, eine Hintergrundfarbe usw. haben.
• Ein Symbol kann in CSS oder HTML eingebettet werden. In HTML können Sie das Zeichen direkt verwenden oder eine HTML-Entität verwenden, um es darzustellen.
• Einige Symbole können ohne die Verwendung eines Webfonts angezeigt werden. Die meisten Symbole können das nicht.
• Die mehrfache Verwendung desselben Symbols impliziert eine Duplizierung des Symbols, wenn Ihr Zeichen in den HTML-Code eingebettet ist. Beim Einbetten der Datei in das CSS ist keine Duplizierung erforderlich.
• Sie können verwenden color, font-size, line-height, background-color oder andere schriftartbezogene Gestaltungsregeln, um die Anzeige Ihres Symbols zu ändern
• Sie benötigen keine besonderen technischen Kenntnisse
• Unterstützung in allen gängigen Browsern, einschließlich alter Versionen von IE

Ich persönlich würde die Verwendung von Hintergrundbildern nur dann empfehlen, wenn Sie mehrere Farben benötigen und diese Farbe damit nicht erreicht werden kann color, background-color und andere farbbezogene CSS-Regeln für Schriftarten.

Der Hauptvorteil der Verwendung von SVG-Bildern besteht darin, dass Sie verschiedenen Komponenten eines Symbols ihren eigenen Stil geben können. Wenn Sie Ihren SVG-XML-Code in das HTML-Dokument einbetten, ist dies dem Styling des HTML sehr ähnlich. Dies würde jedoch zu einer Webseite führen, die sowohl HTML-Tags als auch SVG-Tags verwendet, was die Lesbarkeit einer Webseite erheblich beeinträchtigen könnte. Es fügt auch eine zusätzliche Aufblähung hinzu, wenn das Symbol auf mehreren Seiten wiederholt wird, und Sie müssen berücksichtigen, dass alte Versionen von IE SVG nicht oder nur eingeschränkt unterstützen.

Sie müssen keine Zeichencodes verwenden; Verwenden Sie einfach UTF-8 und fügen Sie sie wörtlich ein. so:

▲▼

Wenn Sie die Entitäten unbedingt verwenden müssen, sind sie es ▲ und ▼beziehungsweise.

▲ ist das schwarze nach oben zeigende Unicode-Dreieck (▲) während ▼ ist das schwarze, nach unten zeigende Dreieck (▼).

Sie können einfach die Zeichen (aus dem Internet kopiert) einstecken Diese Seite zum Nachschlagen.

Überprüfen Sie diese Seite http://www.alanwood.net/unicode/geometric_shapes.htmldas erste ist “9650 ▲ 25B2 SCHWARZES NACH OBEN ZEIGENDREIECK (vorhanden in WGL4)” und das zweite “9660 ▼ 25BC SCHWARZES NACH UNTEN ZEIGENDES DREIECK (vorhanden in WGL4)”.