Welche Zeichen können für auf/ab-Dreieck (Pfeil ohne Stiel) verwendet werden, um in HTML angezeigt zu werden?

Question

Ich suche ein HTML- oder ASCII-Zeichen, das ein nach oben oder unten zeigendes Dreieck darstellt, damit ich es als Umschalter verwenden kann.

Ich habe ↑ (↑) und ↓ (↓) gefunden - aber die haben einen schmalen Stiel. Ich suche nur den HTML-Pfeil "Kopf".

Answer 1

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

Methode 1: Verwendung einer dezimalen HTML-Entität

HTML :

▼

---

Methode 2: Verwendung einer hexadezimalen HTML-Entität

HTML :

▼

---

Methode 3: Verwenden Sie das Zeichen direkt

HTML :

---

Methode 4: Verwenden Sie CSS

HTML :

CSS :

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

---

Jede dieser drei Methoden sollte die gleiche Ausgabe haben. Für andere Symbole gibt es dieselben drei Optionen. Einige haben sogar eine vierte Option, mit der Sie eine Zeichenreferenz verwenden können (zum Anzeigen von ♥).

Sie können eine Referenz-Website wie Unicode-table.com verwenden, um herauszufinden, welche Icons in UNICODE unterstützt werden und mit welchen Codes sie korrespondieren. Zum Beispiel finden Sie die Werte für das nach unten zeigende Dreieck unter http://unicode-table.com/de/25BC/.

Beachten Sie, dass diese Methoden nur für Symbole ausreichen, die standardmäßig in jedem Browser verfügbar sind. Für Symbole wie ,,,,, oder ist dies weitaus unwahrscheinlicher der Fall. Während es möglich ist, für andere UNICODE-Symbole plattformübergreifende Unterstützung bereitzustellen, ist das Verfahren 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 einer Webfont mit Unicode Supplementary Multilingual Plane-Symbolen für weitere Informationen dazu.

---

Hintergrundbilder

Eine völlig andere Strategie ist die Verwendung von Hintergrundbildern anstelle von Schriftarten. Für optimale Leistung ist es am besten, das Bild in Ihrer CSS-Datei durch Base64-Encoding einzubetten, wie von z.B. @weasel5i2 und @Obsidian erwähnt. Ich würde jedoch die Verwendung von SVG anstelle von GIF empfehlen, da dies sowohl für die Leistung als auch für die Schärfe Ihrer Symbole besser ist.

Der folgende Code ist das Base64 für eine SVG-Version des Icons:

/* Größe: 0,9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmc... //...

``

Wann man Hintergrundbilder oder Schriftarten verwenden sollte

Für viele Anwendungsfälle sind SVG-basierte Hintergrundbilder und Symbol-Schriftarten in Bezug auf Leistung und Flexibilität weitgehend äquivalent. Um zu entscheiden, was zu wählen ist, beachten Sie die folgenden Unterschiede:

SVG-Bilder

• Sie können mehrere Farben haben
• Sie können ihr eigenes CSS einbetten und/oder vom HTML-Dokument gestylt 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 repräsentiert. Sie können das Zeichen nicht direkt in Ihrem Code-Editor verwenden oder eine HTML-Entität verwenden
• Mehrere Verwendungen desselben Symbols implizieren eine Duplizierung des Symbols, wenn XML-Code im HTML eingebettet ist. Eine Duplizierung ist nicht erforderlich, wenn die Datei in CSS eingebettet wird oder als separate Datei geladen wird
• Sie können Farbe, Schriftgröße, Zeilenhöhe, Hintergrundfarbe oder andere schriftbezogene Styling-Regeln nicht verwenden, um die Anzeige Ihres Symbols zu ändern, aber Sie können verschiedene Komponenten des Symbols individuell ansprechen.
• Sie benötigen einige Kenntnisse über SVG und/oder Base64-Encoding
• Begrenzte oder keine Unterstützung in älteren Versionen von IE

Symbolschriften

• Ein Symbol kann eine Füllfarbe, eine Hintergrundfarbe usw. haben.
• Ein Symbol kann in CSS oder HTML eingebettet sein. Im HTML können Sie das Zeichen direkt verwenden oder eine HTML-Entität zur Darstellung verwenden.
• Einige Symbole können ohne die Verwendung einer Webfont angezeigt werden. Die meisten Symbole können nicht.
• Mehrere Verwendungen desselben Symbols implizieren eine Duplizierung des Symbols, wenn Ihr Zeichen im HTML eingebettet ist. Eine Duplizierung ist nicht erforderlich, wenn die Datei in CSS eingebettet wird.
• Sie können Farbe, Schriftgröße, Zeilenhöhe, Hintergrundfarbe oder andere schriftbezogene Styling-Regeln verwenden, um die Anzeige Ihres Symbols zu ändern
• Sie benötigen kein spezielles technisches Wissen
• Unterstützung in allen gängigen Browsern, einschließlich älterer Versionen von IE

Persönlich würde ich die Verwendung von Hintergrundbildern nur empfehlen, wenn Sie mehrere Farben benötigen und diese Farben nicht durch die Verwendung von Farbe, Hintergrundfarbe und anderen farblichen CSS-Regeln für Schriften erreicht werden können.

Der Hauptvorteil der Verwendung von SVG-Bildern liegt darin, dass Sie den verschiedenen Komponenten eines Symbols ihr eigenes Styling geben können. Wenn Sie Ihren SVG-XML-Code im HTML-Dokument einbetten, ist dies sehr ähnlich wie das Styling des HTMLs. Dies würde jedoch zu einer Webseite führen, die sowohl HTML-Tags als auch SVG-Tags verwendet, was die Lesbarkeit einer Webseite erheblich reduzieren könnte. Es fügt auch zusätzliche Überladung hinzu, wenn das Symbol auf mehreren Seiten wiederholt wird, und Sie müssen berücksichtigen, dass alte Versionen von IE keine oder nur eingeschränkte Unterstützung für SVG haben.

``

Answer 2

Normalerweise ist es am besten, einen Charakter in seinem Kontext zu sehen.

Hier ist die vollständige Liste der Unicode-Zeichen und wie sie derzeit in Ihrem Browser angezeigt werden. Ich sehe diese Liste sich entwickeln, Browser-Versionen nach anderen.

Diese Liste wird durch Iteration in Dezimalwerten der HTML-Entitäten der Unicode-Tabelle erhalten, es kann einige Sekunden dauern, aber ist in vielen Fällen sehr nützlich.

Wenn Sie schnell über ein bestimmtes Zeichen fahren, erhalten Sie den Dezimal- und Hexadezimalwert sowie die Tastenkombinationen, um es mit der Tastatur zu generieren.

var i = 0
    do document.write(""+"&#"+i+";"),i++
    while (i<136690)
window.stop() 

// Aus https://codepen.io/Nico_KraZhtest/pen/mWzXqy

Derselbe Ausschnitt als Lesezeichen:

javascript:void%20!function(){var%20t=0;do{document.write(%22%3Ca%20title='(Linux|Hex):%20[CTRL+SHIFT]+u%22+t.toString(16)+%22\nHtml%20entity:%20%26%23%20%22+t+%22;\n%26%23x%22+t.toString(16)+%22;\n(Win|Dec):%20[ALT]+%22+t+%22'%20onmouseover='this.focus()'%20onclick='this.href=\%22https://google.com/%3Fq=\%22+this.innerHTML'%20style='cursor:pointer'%20target='new'%3E%26%23%22+t+%22;%3C/a%3E%22),t++}while(t%3C136690);window.stop()}();

---

Um diese Liste von php zu generieren:

for ($x = 0; $x < 136690; $x++) {
  echo html_entity_decode('&#'.$x.';',ENT_NOQUOTES,'UTF-8');
}

Um diese Liste in die Konsole zu generieren, mit php:

php -r 'for ($x = 0; $x < 136690; $x++) { echo html_entity_decode("&#".$x.";",ENT_NOQUOTES,"UTF-8");}'

---

Hier ist ein Auszug im Klartext von Pfeilen, einige kommen mit Unicode 10.0. http://unicode.org/versions/Unicode10.0.0/

Unicode 10.0 fügt 8.518 Zeichen hinzu, insgesamt gibt es 136.690 Zeichen.

---

Haben Sie bemerkt, dass das einfache HTML

-Element einen Dropdown-Pfeil hat? Manchmal ist das alles, was wir brauchen.

  Morgen
  Hallo Welt!

  Abend
  Wie süß?

Answer 3

"Not ASCII (neither's /)" benötigt eine Qualifikation.

Obwohl diese Zeichen nicht in dem American Standard Code for Information Interchange als Glyphen definiert sind, wurden ihre Codes häufig verwendet, um eine grafische Darstellung für die ASCII-Codes 24 und 25 (hex 18 und 19, CANcel und EM: End of Medium) zu liefern. Codepage 437 (von IBM als Extended ASCII bezeichnet, umfasst die numerischen Codes 128 bis 255) definierte die Verwendung dieser Glyphen als ASCII-Codes und die Allgegenwart dieser Konventionen durchdrang die Branche, wie am Einsatz als Standards durch führende Unternehmen wie HP, insbesondere für Drucker, und IBM, insbesondere für Mikrocomputer, beginnend mit dem Original-PC, zu erkennen ist.

Genauso wie die Verwendung der ASCII-Codes für CAN und EM zum damaligen Zeitpunkt relativ veraltet war und ihre Verwendung als Glyphen gerechtfertigt war, hat die Zeit sie ebenso durch den gegenwärtigen Einsatz von UNICODE-Konventionen obsolet gemacht.

---

Es sollte betont werden, dass die von IBM für das Extended-ASCII vorgenommenen Erweiterungen zu ASCII nicht nur eine größere numerische Menge für numerische Codes von 128 bis 255 umfassten, sondern auch die Verwendung einiger numerischer Steuerzeichen im ASCII-Bereich von 0 bis 32 von nur Medienübertragungssteuerungsprotokollen auf Glyphen erweiterten. Oft wird fälschlicherweise angenommen, dass die ersten 0 bis 128 nicht "erweitert" wurden und dass IBM die Glyphen des herkömmlichen ASCII für diesen Bereich verwendet hat. Dieser Fehler wird auch in einer der vorherigen Referenzen perpetuiert. Dieser Fehler verbreitete sich so stark, dass er ASCII unbewusst neu definierte.

Answer 4

Ich weiß, ich bin spät dran, aber das kannst du auch mit reinem CSS erreichen:

HTML:

(Es kann jedes HTML-Element sein, wenn du ein Inline-Element wie z.B. ein verwendest, stellen sicher, dass du es zu einem Block-/Inline-Block-Element mit display:block; oder display:inline-block machst):

und

CSS:

.up {
   height:0;
   width:0;
   border-top:100px solid black;
   border-left:100px solid transparent;
   transform:rotate(-45deg);   
  }

.down {
   height:0;
   width:0;
   border-bottom:100px solid black;
   border-right:100px solid transparent;
   transform:rotate(-45deg); 
  }

Du kannst es auch mit den :before und :after Pseudo-Elementen machen, was eigentlich besser ist, da du dadurch das Erstellen zusätzlicher Markup vermeidest. Aber das liegt bei dir, wie du es erreichen möchtest.

--

Hier ist eine Demo in CodePen mit vielen Pfeil-Möglichkeiten.

Answer 5

Ich denke, der Fragesteller bezieht sich möglicherweise auf eine dieser (siehe angehängtes Bild) - ich habe diese StackOverflow-Frage gefunden, als ich selbst nach dem gleichen gesucht habe.

Leider scheint dieses Glyph nicht als eigenständige Zeichenentität irgendwo zu existieren. Wikipedia realisiert es unten durch die Verwendung von Inline-Javascript und img content="data:image/gif..." um das Symbol zu erreichen.

Übrigens, hier ist das Base64 dafür:

data:image/gif;base64,R0lGODlhFQAJAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE4OEM2REYyN0ExMDhBNDJFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdCNTAyODcwMEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdCNTAyODZGMEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAAFQAJAAACF4yPgMsJ2mJ4VDKKrd4GVz5lYPeMiVUAADs=

Hoffentlich hilft dies jemandem!