Ich suche nach einem HTML- oder ASCII- Zeichen, bei dem es sich um ein Dreieck handelt, das nach oben oder unten zeigt, damit ich es als Kippschalter verwenden kann.
Ich habe ↑ ( ↑
) und ↓ ( ↓
) gefunden - aber diese haben einen schmalen Stiel. Ich suche nur nach dem HTML-Pfeil "head".
Antworten:
Unicode-Pfeilköpfe:
Für ▲ und ▼ Verwendung
▲
und▼
jeweils , wenn Sie Unicode - Zeichen direkt nicht enthalten können (Verwendung von UTF-8!).Beachten Sie, dass die Schriftartenunterstützung für die kleineren Versionen nicht so gut ist. Verwenden Sie besser die großen Versionen in kleinerer Schrift.
Weitere Unicode-Pfeile finden Sie unter:
Schließlich sind diese Pfeile nicht ASCII, einschließlich ↑ und ↓: Sie sind Unicode.
quelle
Für HTML-Entitäten
◄ =
◄
► =
►
▼ =
▼
▲ =
▲
quelle
OPTION 1: UNICODE COLUMN SORT ARROWS
Ich fand dieses sehr praktisch für einen einzelnen Zeichenspalten-Sortierer. (Sieht gut hochskaliert aus) .
⇕
= ⇕WICHTIGE NOTIZ (Bei Verwendung von Unicode-Symbolen)
Die Unicode-Unterstützung hängt vom gewählten Symbol, dem Browser und der Schriftfamilie ab. Wenn Sie feststellen, dass das von Ihnen gewählte Symbol in einigen Browsern nicht funktioniert, verwenden Sie eine andere Schriftfamilie. Microsoft empfiehlt
"Segoe UI Symbol"
jedoch, die Schriftart in Ihre Website aufzunehmen, da nicht viele Benutzer sie auf ihren Computern haben.Öffnen Sie diese Seite in anderen Browsern, um zu sehen, welche Symbole mit der Standardschriftart gerendert werden.
Noch ein paar Unicode-Pfeile.
Sie können sie direkt von der folgenden Seite kopieren oder den Code verwenden.
Jede Pfeilreihe ist von links nach rechts nummeriert:
Fügen Sie einfach die entsprechende Zahl / den entsprechenden Buchstaben wie oben vor dem schließenden Semikolon ein.
ș
← ↑ → ↓ ↓ ↔ ↕ ↗ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟
Ț
↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↧ ↩ ↪ ↫ ↫ ↬ ↭ ↮ ↯
ț
↰ ↱ ↲ ↳ ↵ ↵ ↵ ↶ ↷ ↹ ↺ ↺ ↻ ↼ ↽ ↾ ↿
Ȝ
⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇇ ⇉ ⇊ ⇋ ⇋ ⇌ ⇍ ⇎ ⇏
ȝ
⇒ ⇑ ⇒ ⇓ ⇓ ⇓ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟
Ȟ
⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇧ ⇩ ⇪ ⇫ ⇫ ⇬ ⇭ ⇮ ⇯
ȟ
⇰ ⇱ ⇲ ⇳ ⇴ ⇵ ⇶ ⇷ ⇷ ⇹ ⇺ ⇻ ⇻ ⇼ ⇽ ⇾ ⇿
Zusätzliche HTML-Unicode-Symbole
Eine ausgewählte Liste anderer hilfreicher Unicode-Symbole.
OPTION 2: PURE CSS CHEVRONS
Ich habe kürzlich einen Artikel über das effiziente Erstellen von Chevrons nur mit CSS verfasst (keine Bilder erforderlich).
So ändern Sie einfach:
CLICK FOR DEMO ON JSFIDDLE
CSS (Effizient mit Cross-Browser-Unterstützung)
OPTION 3: CSS BASE64 IMAGE ICONS
OBEN UNTEN
NIEDER
OBEN
Mit nur wenigen Zeilen CSS können wir unsere Bilder in base64 codieren.
CLICK FOR DEMO ON JSFIDDLE
PROS
Nachteile
CSS
quelle
⇫
und höher sehen in FF und IE gut aus, werden jedoch in Chrome nicht gerendert.Sorry, aber sie sind nur in Unicode. :(
Grosse:
U+25B2
(Schwarzes nach oben zeigendes Dreieck ▲)U+25BC
(Schwarzes nach unten zeigendes Dreieck ▼)U+25C0
(Schwarzes nach links zeigendes Dreieck ◀)U+25B6
(Schwarzes rechtwinkliges Dreieck ▶)Große weiße:
U+25B3
(Weißes nach oben zeigendes Dreieck △)U+25BD
(Weißes nach unten zeigendes Dreieck ▽)U+25C1
(Weißes nach links zeigendes Dreieck ◁)U+25B7
(Weißes nach rechts zeigendes Dreieck ▷)Es gibt auch einige kleinere Dreiecke:
U+25B4
(Schwarzes nach oben zeigendes kleines Dreieck ▴)U+25C2
(Schwarzes, nach links zeigendes kleines Dreieck ◂)U+25BE
(Schwarzes nach unten zeigendes kleines Dreieck ▾)U+25B8
(Schwarzes, nach rechts zeigendes kleines Dreieck ▸)Auch einige weiße:
U+25C3
(Weißes, nach links zeigendes kleines Dreieck ◃)U+25BF
(Weißes nach unten zeigendes kleines Dreieck ▿)U+25B9
(Weißes, nach rechts zeigendes kleines Dreieck ▹)U+25B5
(Weißes nach oben zeigendes kleines Dreieck ▵)Es gibt auch einige "spitze" Dreiecke. Sie können hier in Wikipedia mehr lesen:
Informationen http://en.wikipedia.org/wiki/Geometric_Shapes
Leider sind sie alle Unicode anstelle von ASCII. Wenn Sie weiterhin ASCII verwenden möchten, können Sie eine Bilddatei verwenden, die nur
^
und verwendetv
. (Genau wie bei Google Maps in der mobilen Versionbezog sich dies auf das alte mobile Google Maps.)Wie andere ebenfalls vorgeschlagen haben, können Sie auch Dreiecke mit HTML erstellen, entweder mit CSS-Rahmen oder SVG-Formen oder sogar mit JavaScript-Leinwänden.
CSS
SVG
JavaScript
Demo
quelle
Da Sie diese Pfeile für einen Kippschalter verwenden, sollten Sie diese Pfeile mit einem HTML-Element erstellen, indem Sie die folgenden Stile anstelle von Unicode-Zeichen verwenden.
http://jsfiddle.net/FrsGR/
quelle
:after
, um Dialogblasen zu erstellen.Der Block " Spacing Modifier Letters" enthält wörtliche Pfeilspitzen :
quelle
˄
oder dezimal˄
. Wenn Sie jedoch die richtigen Seitencodierungen haben, sollten Sie diese nur kopieren und in das Dokument einfügen können.Es gibt verschiedene korrekte Möglichkeiten, ein nach unten 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:
CSS:
Jede dieser drei Methoden sollte dieselbe Ausgabe haben. Für andere Symbole gibt es dieselben drei Optionen. Einige haben sogar eine vierte Option, mit der Sie eine auf Zeichenfolgen basierende Referenz verwenden können (z. B.
♥
um ♥ anzuzeigen).Sie können eine Referenzwebsite wie Unicode-table.com verwenden, um herauszufinden, welche Symbole in UNICODE unterstützt werden und welchen Codes sie entsprechen. Die Werte für das nach unten weisende Dreieck finden Sie beispielsweise 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. Bei Symbolen wie ☃, ❄, ★, ☂, ☭, ⎗ oder ⎘ ist dies weitaus weniger wahrscheinlich. Während es möglich ist, andere UNICODE-Symbole browserübergreifend zu unterstützen, 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, finden Sie unter Erstellen von Webfonts mit zusätzlichen mehrsprachigen Unicode-Ebenensymbolen weitere Informationen dazu.
Hintergrundbilder
Eine völlig andere Strategie ist die Verwendung von Hintergrundbildern anstelle von Schriftarten. Für eine optimale Leistung ist es am besten, das Bild durch Basiskodierung in Ihre CSS-Datei einzubetten, wie z. @ weasel5i2 und @Obsidian. Ich würde die Verwendung von SVG anstelle von GIF empfehlen. Dies ist jedoch sowohl für die Leistung als auch für die Schärfe Ihrer Symbole besser.
Dieser folgende Code ist die base64 für und SVG-Version des Symbols:
Wann werden Hintergrundbilder oder Schriftarten verwendet?
In vielen Anwendungsfällen sind SVG-basierte Hintergrundbilder und Symbolschriftarten hinsichtlich Leistung und Flexibilität weitgehend gleichwertig. Berücksichtigen Sie die folgenden Unterschiede, um zu entscheiden, welche Sie auswählen möchten:
SVG-Bilder
color
,font-size
,line-height
,background-color
oder anderes Schriftart im Zusammenhang Stilregeln die Anzeige Ihres Symbols zu ändern, aber Sie können individuell verschiedene Komponenten des Symbols als Formen verweisen.Symbolschriftarten
color
,font-size
,line-height
,background-color
oder anderes Schriftart im Zusammenhang Stilregeln die Anzeige Ihres Symbols ändernPersönlich würde ich die Verwendung von Hintergrundbildern nur empfehlen, wenn Sie mehrere Farben benötigen und diese Farben nicht erreicht werden können mit
color
:background-color
und anderen farbbezogenen CSS - Regeln für Schriftarten.Der Hauptvorteil der Verwendung von SVG-Bildern besteht darin, dass Sie verschiedenen Komponenten eines Symbols ein eigenes Design geben können. Wenn Sie Ihren SVG-XML-Code in das HTML-Dokument einbetten, ist dies dem Stil des HTML-Codes 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 zusätzliches Aufblähen hinzu, wenn das Symbol auf mehreren Seiten wiederholt wird und Sie berücksichtigen müssen, dass alte Versionen von IE SVG nicht oder nur eingeschränkt unterstützen.
quelle
"Nicht ASCII (weder ↑ / ↓)" muss qualifiziert werden.
Während diese Zeichen im amerikanischen Standardcode für den Informationsaustausch nicht als Glyphen definiert sind, wurden ihre Codes üblicherweise verwendet, um eine grafische Darstellung der ASCII-Codes 24 und 25 (hex 18 und 19, CANcel und EM: Ende des Mediums) zu geben. Codepage 437 (von IBM Extended ASCII genannt, enthält die numerischen Codes 128 bis 255) definierte die Verwendung dieser Glyphen als ASCII-Codes, und die Allgegenwart dieser Konventionen durchdrang die Branche, da sie von führenden Unternehmen wie HP als Standards eingesetzt wurden. insbesondere für Drucker und IBM, insbesondere für Mikrocomputer, die mit dem Original-PC beginnen.
So wie die Verwendung der ASCII-Codes für CAN und EM zu dieser Zeit relativ veraltet war und ihre Verwendung als Glyphen rechtfertigte, hat die Verwendung der Codes als Glyphen im Laufe der Zeit durch die derzeitige Verwendung von UNICODE-Konventionen überholt.
Es sollte betont werden, dass die von IBM in Extended ASCII vorgenommenen Erweiterungen von ASCII nicht nur einen größeren numerischen Satz für die numerischen Codes 128 bis 255 enthielten, sondern auch die Verwendung einiger numerischer Steuercodes im ASCII-Bereich von 0 bis 32 von Nur Protokolle zur Steuerung der Medienübertragung, die Glyphen enthalten. Es wird oft fälschlicherweise angenommen, dass die ersten 0 bis 128 nicht "erweitert" wurden und dass IBM die Glyphen von herkömmlichem ASCII für diesen Bereich verwendete. Dieser Fehler wird auch in einer der vorherigen Referenzen begangen. Dieser Fehler war so weit verbreitet, dass er ASCII umgangssprachlich unterschwellig neu definierte.
quelle
Ich weiß, dass ich zu spät zur Party komme, aber Sie können dies auch mit einfachem CSS erreichen:
HTML:
(Es kann sich um ein beliebiges HTML-Element handeln. Wenn Sie ein Inline-Element wie
<span>
z. B. verwenden, stellen Sie sicher, dass Sie es zu einem Block / Inline-Block-Element mitdisplay:block;
oder machen.display:inline-block
) :<div class="up"></div>
und
<div class="down"></div>
CSS:
Sie können dies auch mit
:before
und erreichen:after
Pseudoelementen erreichen, was eigentlich ein besserer Weg ist, da Sie vermeiden, zusätzliches Markup zu erstellen. Aber es liegt an Ihnen, wie Sie dies erreichen möchten.- -
Hier ist eine Demo in CodePen mit vielen Pfeilmöglichkeiten .
quelle
Viele Leute hier schlagen vor, die Dreiecke zu verwenden, aber manchmal braucht man einen Chevron.
Wir hatten einen Fall, in dem unsere Schaltfläche einen Chevron zeigt, und wollten, dass das Benutzerhandbuch auf die Schaltfläche so verweist, dass sie auch von einem nicht technischen Benutzer erkannt wird. Also brauchten wir ein Chevron-Schild.
Wir haben am Ende ﹀ verwendet. Es ist als PRÄSENTATIONSFORMULAR FÜR VERTIKALE RECHTE WINKELHALTERUNG bekannt und der Code lautet U + FE40.
quelle
Normalerweise ist es am besten, einen Charakter in seinem Kontext zu sehen.
Hier ist die vollständige Liste der Unicode-Zeichen und wie Ihr Browser sie derzeit anzeigt. Ich sehe, wie sich diese Liste weiterentwickelt, Browserversionen nach anderen.
Diese Liste wird durch Iteration der Unicode-Tabelle der HTML-Entitäten in Dezimalzahl erhalten. Es kann einige Sekunden dauern, ist aber in vielen Fällen für mich sehr nützlich.
Wenn Sie schnell mit der Maus über ein bestimmtes Zeichen fahren, erhalten Sie dec und hex sowie die Verknüpfungen, um es mit einer Tastatur zu generieren.
Das gleiche Snippet wie ein Lesezeichen:
So generieren Sie diese Liste aus PHP :
Um diese Liste in der Konsole zu generieren, verwenden Sie PHP :
Hier ist ein Klartext-Auszug von Pfeilen, einige kommen mit Unicode 10.0 . http://unicode.org/versions/Unicode10.0.0/
🔙🔚🔛🔜🔝🖗🖘🖙🖚🖛🖜🖝🖞🖟🞀🞁🞂🞃🔺🔻🔼🔽𝆒𝆓𐃘⭝⭞⭟⭠⭡⭢⭣⭤⭥⭦⭧⭨⭩⭪⭫⭬⭭⭮⭯⭰⭱⭲⭳⭶⭷ ⭸⭹⭺⭻⭼⭽⭾⭿⮀⮁⮂⮃⮄⮅⮆⮇⮈⮉⮊⮋⮌⮍⮎⮏⮐⮑⮒⮓⮔⮕⮘⮙⮚⮛⮜⮝⮞⮟⮠⮡⮢⮣⮤⮥⮦⮧⮨⮩⮪⮫ ⮬⮭⮮⮯⮰⮱⮲⮳⮴⮵⮶⮷⮸⮹⮽⮾⮿⯀⯁⯂⯅⯆⯇⯈⬶⬷⬸⬹⬺⬻⬼⬽⬾⬀⬁⬂⬃⬄⬅⬆⬇⬈⬉⬊⬋⬌⬍⬎⬏⬐ ⬑⤀⤁⤂⤃⤄⤅⤆⤇⤈⤉⤊⤋⤌⤍⤎⤏⤐⤑⤒⤓⤔⤕⤖⤗⤘⤙⤚⤛⤜⤝⤞⤟⤠⤡⤢⤣⤤⤥⤦⤧⤨⤩⤪⤫⤬⤭⤮⤯⤰ ⤱⤲⤳⤴⤵⤶⤷⤸⤹⤺⤻⤼⤽⤾⤿⥀⥁⥂⥃⥄⥅⥆⥇⥈⥉⥊⥋⥌⥍⥎⥏⥐⥑⥒⥓⥔⥕⥖⥗⥘⥙⥚⥛⥜⥝⥞⥟⥠⥡⥢ ⥣⥤⥥⥦⥧⥨⥩⥪⥫⥬⥭⥮⥯⥰⥱⥲⥳⥴⥵⟨⟩⟪⟫⟬⟭⟮⟯⟰⟱⟲⟳⟴⟵⟶⟷⟸⟹⟺⟻⟼⟽⟾⟿➘➙➚➛➜➝➞ ➟➠➡➢➣➤➥➦➧➨➩➪➫➬➭➮➯➰➱➲➳➴➵➶➷➸➹➺➻➼➽➾⊲⊳⊴⊵ ← ↑ → ↓ ↔↕↖↗↘↙↚↛↜↝ ↞↟↠↡↢↣↤↥↦↧↨↩↪↫↬↭↮↯↰↱↲↳↴↵↶↷↸↹↺↻↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⇈⇉⇊⇋⇌⇍⇎⇏ ⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇚⇛⇜⇝⇞⇟⇠⇡⇢⇣⇤⇥⇦⇧⇨⇩⇪⇫⇬⇭⇮⇯⇰⇱⇲⇳⇴⇵⇶⇷⇸⇹⇺⇻⇼⇽⇾⇿ᐂᐃᐄᐅᐆᐇᐈᐉᐊᐋᐌᐍᐎᐏᐐᐑᐒᐓᐔᐕᐖᐗᐘᐙᐚᐛᐫᐬᐭᐮᐯᐰᐱᐲᐳᐴᐵᐶᐷᐸᐹᐺᐻᐼᐽᐾᐿᑀᑁᑂᑃᑄᑅᑆᑇᑈ🞀 🞁🞂🞃🠀🠁🠂🠃🠄🠅🠆🠇🠈🠉🠊🠋🠐🠑🠒🠓🠔🠕🠖🠗🠘🠙🠚🠛🠜🠝🠞🠟🠠🠡🠢🠣🠤🠥🠦🠧🠨🠩🠪🠫🠬🠭🠮🠯🠰🠱🠲 🠳🠴🠵🠶🠷🠸🠹🠺🠻🠼🠽🠾🠿🡀🡁🡂🡃🡄🡅🡆🡇🡐🡑🡒🡓🡔🡕🡖🡗🡘🡙🡠🡡🡢🡣🡤🡥🡦🡧🡨🡩🡪🡫🡬🡭🡮🡯🡰🡱🡲 🡳🡴🡵🡶🡷🡸🡹🡺🡻🡼🡽🡾🡿🢀🢁🢂🢃🢄🢅🢆🢇🢐🢑🢒🢓🢔🢕🢖🢗🢘🢙🢚🢛🢜🢝🢞🢟🢠🢡🢢🢣🢤🢥🢦🢧🢨🢩🢪🢫
quelle
HTML-Entitäten für leere Dreiecke
◁ =
◁
▷ =
▷
▽ =
▽
△ =
△
quelle
▲ ▼ Dies sind U + 25B2 (
▲
) bzw. U + 25BC (▼
)quelle
Ich denke, der Fragesteller bezieht sich möglicherweise auf eine dieser Fragen (siehe beigefügtes Bild). Ich habe diese StackOverflow-Frage gefunden, als ich selbst nach derselben Sache gesucht habe.
Leider scheint diese Glyphe nirgendwo als eigenständige Zeicheneinheit zu existieren. Wikipedia erreicht dies im Folgenden, indem Inline-Javascript und img content = "data: image / gif ..." verwendet werden, um das Symbol zu erhalten.
Hier ist übrigens die base64 dafür:
Hoffe das hilft jemandem!
quelle
Dies scheint zu implizieren, dass 030 und 031 Auf- und Ab-Dreiecke sind.
(Wie Bobince betonte, scheint dies kein ASCII-Standard zu sein.)
quelle
Ich benutze ▼ und ▲, aber sie funktionieren möglicherweise nicht für Sie. Ich benutze alt 11551 für den ersten und 11550 für den zweiten. Sie können sie jederzeit kopieren und einfügen, wenn der ASCII für Ihr System nicht identisch ist.
quelle
Ich habe festgestellt, dass die meisten hier empfohlenen Symbole (▼ und ▲) zu fett aussehen. Auf der vom Benutzer ADJenks empfohlenen Website codepoints.net habe ich diese Symbole gefunden, die für meinen Geschmack besser aussehen: 🞀 (U + 1F780) 🞁 (U + 1F781) 🞂 (U + 1F782) 🞃 (U + 1F783)
quelle
Die Seite, die ich dafür gerne benutze, ist codepoints.net
Hier ist eine Suche nach den Wörtern "Pfeilspitze" und "Dreieck": https://codepoints.net/search?q=arrowhead+triangle
Es gibt einige Übereinstimmungen für "Dreieckspfeil" mit Stielen, aber es sind nur 4 kleine Seiten zum Überfliegen und es gibt viele gute Übereinstimmungen mit netten Details zu jedem Charakter.
Es gibt auch einen Codeblock für "Verschiedene Symbole und Pfeile", und diese Website listet sie hier auf: https://codepoints.net/miscellaneous_symbols_and_arrows
quelle
Hier ist noch einer - ᐞ - Unicode U + 141E / CANADIAN SYLLABICS GLOTTAL STOP
quelle