Saya mencari karakter HTML atau ASCII yang merupakan segitiga mengarah ke atas atau ke bawah sehingga saya dapat menggunakannya sebagai toggle switch.
Saya menemukan ↑ ( ↑
), dan ↓ ( ↓
) - tetapi mereka memiliki batang yang sempit. Saya hanya mencari panah HTML "head".
Jawaban:
Kepala panah Unicode:
Untuk penggunaan ▲ dan ▼
▲
dan▼
masing - masing jika Anda tidak dapat memasukkan karakter Unicode secara langsung (gunakan UTF-8!).Perhatikan bahwa dukungan font untuk versi yang lebih kecil tidak sebaik ini. Lebih baik menggunakan versi besar dalam font yang lebih kecil.
Lebih banyak panah Unicode ada di:
Terakhir, panah-panah ini bukan ASCII, termasuk ↑ dan ↓: mereka adalah Unicode.
sumber
Untuk Entitas HTML
◄ =
◄
► =
►
▼ =
▼
▲ =
▲
sumber
OPSI 1: PANAH SORT KOLOM UNIKODE
Saya menemukan ini sangat berguna untuk penyortir kolom karakter tunggal. (Tampak baik upcaled) .
⇕
= ⇕CATATAN PENTING (Saat menggunakan simbol Unicode)
Dukungan Unicode bervariasi tergantung pada simbol pilihan, browser, dan kelompok font. Jika Anda menemukan simbol yang Anda pilih tidak berfungsi di beberapa peramban maka cobalah menggunakan keluarga font yang berbeda.
"Segoe UI Symbol"
Namun Microsoft merekomendasikan untuk memasukkan font ke situs web Anda karena tidak banyak orang memilikinya di komputer mereka.Buka halaman ini di browser lain untuk melihat simbol mana yang dirender dengan font default.
Beberapa lagi panah Unicode.
Anda dapat menyalinnya langsung dari halaman di bawah ini atau Anda dapat menggunakan kode tersebut.
Setiap baris panah diberi nomor dari kiri ke kanan:
Cukup masukkan angka / huruf yang sesuai sebelum titik koma penutup seperti di atas.
ș
← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↛ ↜ ↝ ↞ ↟
Ț
↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↧ ↨ ↪ ↫ ↫ ↬ ↭ ↮ ↯
ț
↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↷ ↸ ↺ ↻ ↻ ↼ ↽ ↾ ↿
Ȝ
⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇅ ⇅ ⇅ ⇅ ⇊ ⇋ ⇋ ⇎ ⇏ ⇏
ȝ
⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇗ ⇘ ⇚ ⇛ ⇛ ⇜ ⇝ ⇞ ⇟
Ȟ
⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇧ ⇨ ⇪ ⇫ ⇫ ⇬ ⇭ ⇮ ⇯
ȟ
⇰ ⇱ ⇲ ⇳ ⇴ ⇵ ⇶ ⇷ ⇷ ⇸ ⇺ ⇻ ⇻ ⇼ ⇽ ⇾ ⇿
Simbol unicode HTML tambahan
Daftar ikon / simbol Unicode bermanfaat lainnya yang dipilih.
OPSI 2: MURNI CHEVRON CSS
Baru-baru ini saya membuat artikel tentang membuat chevron secara efisien hanya menggunakan CSS (Tidak perlu gambar).
Cara mengubah:
CLICK FOR DEMO ON JSFIDDLE
CSS (Efisien dengan dukungan lintas browser)
OPSI 3: ICON GAMBAR CSS BASE64
ATAS / BAWAH
TURUN
NAIK
Dengan hanya menggunakan beberapa baris CSS kita dapat menyandikan gambar kita ke base64.
CLICK FOR DEMO ON JSFIDDLE
PROS
Kon
CSS
sumber
⇫
dan di atas terlihat bagus di FF dan IE, tetapi jangan di-render di Chrome.Maaf tetapi mereka hanya di Unicode. :(
Yang besar:
U+25B2
(Segitiga naik-naik hitam ▲)U+25BC
(Segitiga hitam-ke-bawah ▼)U+25C0
(Segitiga penunjuk kiri hitam ◀)U+25B6
(Segitiga menunjuk kanan hitam ▶)Putih besar:
U+25B3
(Segitiga ke atas putih △)U+25BD
(Segitiga ke bawah putih ▽)U+25C1
(Segitiga menunjuk kiri putih ◁)U+25B7
(Segitiga menunjuk kanan putih ▷)Ada juga beberapa segitiga yang lebih kecil:
U+25B4
(Segitiga kecil hitam yang mengarah ke atas ▴)U+25C2
(Segitiga kecil menunjuk ke kiri hitam ◂)U+25BE
(Segitiga hitam kecil yang mengarah ke bawah ▾)U+25B8
(Segitiga kecil yang menunjuk ke kanan ▸)Juga beberapa yang putih:
U+25C3
(Segitiga kecil menunjuk ke kiri putih ◃)U+25BF
(Segitiga kecil putih yang mengarah ke bawah ▿)U+25B9
(Segitiga kecil putih kanan menunjuk ▹)U+25B5
(Segitiga kecil putih yang mengarah ke atas ▵)Ada juga beberapa segitiga "runcing". Anda dapat membaca lebih lanjut di sini di Wikipedia:
http://en.wikipedia.org/wiki/Geometric_Shapes
Tapi sayangnya, mereka semua Unicode, bukan ASCII. Jika Anda masih ingin menggunakan ASCII, maka Anda dapat menggunakan file gambar untuk itu hanya menggunakan
^
danv
. (Sama seperti Google Maps dalam versi selulerini merujuk ke Google Maps seluler kuno )Seperti yang disarankan orang lain, Anda juga dapat membuat segitiga dengan HTML, baik dengan batas CSS atau bentuk SVG atau bahkan kanvas JavaScript.
CSS
SVG
JavaScript
Demo
sumber
Karena Anda menggunakan panah ini untuk sakelar sakelar, Anda mungkin ingin mempertimbangkan untuk membuat panah ini dengan elemen html menggunakan gaya berikut alih-alih karakter unicode.
http://jsfiddle.net/FrsGR/
sumber
:after
untuk membuat gelembung dialog.Ada panah panah literal di blok Spacing Modifier Letters :
sumber
˄
atau desimal˄
. Tetapi jika Anda memiliki penyandian halaman yang benar, Anda seharusnya hanya dapat menyalin dan menempelkannya ke dalam dokumen.Ada beberapa cara yang benar untuk menampilkan segitiga down-pointing.
Metode 1: gunakan entitas HTML desimal
HTML:
Metode 2: gunakan entitas HTML hexidecimal
HTML:
Metode 3: gunakan karakter secara langsung
HTML:
Metode 4: gunakan CSS
HTML:
CSS:
Masing-masing dari ketiga metode ini harus memiliki keluaran yang sama. Untuk simbol lain, ada tiga opsi yang sama. Beberapa bahkan memiliki opsi keempat, memungkinkan Anda untuk menggunakan referensi berbasis string (mis.
♥
Untuk menampilkan ♥).Anda dapat menggunakan situs web referensi seperti Unicode-table.com untuk menemukan ikon mana yang didukung dalam UNICODE dan kode mana yang sesuai dengannya. Misalnya, Anda menemukan nilai untuk segitiga down-pointing di http://unicode-table.com/en/25BC/ .
Perhatikan bahwa metode ini cukup hanya untuk ikon yang tersedia secara default di setiap browser. Untuk simbol seperti ☃, ❄, ★, ☂, ☭, ⎗ atau ⎘, ini jauh lebih kecil kemungkinannya. Meskipun dimungkinkan untuk memberikan dukungan lintas browser untuk simbol UNICODE lainnya, prosedurnya sedikit lebih rumit.
Jika Anda ingin tahu cara menambahkan dukungan untuk karakter UNICODE yang kurang umum, lihat Membuat webfont dengan simbol Pesawat Multibahasa Pelengkap Unicode untuk info lebih lanjut tentang cara melakukan ini.
Gambar latar belakang
Strategi yang sama sekali berbeda adalah penggunaan gambar latar bukan font. Untuk kinerja yang optimal, yang terbaik adalah menanamkan gambar dalam file CSS Anda dengan basis-encoding, seperti yang disebutkan oleh misalnya. @ weasel5i2 dan @Obsidian. Saya akan merekomendasikan penggunaan SVG daripada GIF, namun, apakah itu lebih baik untuk kinerja dan untuk ketajaman simbol Anda.
Kode berikut ini adalah versi base64 untuk dan ikon SVG :
Kapan harus menggunakan gambar latar belakang atau font
Untuk banyak kasus penggunaan, gambar latar belakang berbasis SVG dan font ikon sebagian besar setara dalam hal kinerja dan fleksibilitas. Untuk memutuskan mana yang akan dipilih, pertimbangkan perbedaan berikut:
Gambar SVG
color
,font-size
,line-height
,background-color
atau aturan styling font yang terkait lainnya untuk mengubah tampilan icon Anda, tetapi Anda dapat referensi komponen yang berbeda dari ikon sebagai bentuk individual.Font ikon
color
,font-size
,line-height
,background-color
atau aturan styling font yang terkait lainnya untuk mengubah tampilan icon AndaSecara pribadi, saya akan merekomendasikan penggunaan gambar latar belakang hanya ketika Anda membutuhkan banyak warna dan warna tersebut tidak dapat dicapai dengan cara
color
,background-color
dan aturan CSS terkait warna lainnya untuk font.Manfaat utama menggunakan gambar SVG adalah Anda dapat memberikan komponen simbol yang berbeda dengan gaya mereka sendiri. Jika Anda menanamkan kode SVG XML Anda dalam dokumen HTML, ini sangat mirip dengan menata HTML. Namun, ini akan menghasilkan halaman web yang menggunakan tag HTML dan tag SVG, yang dapat secara signifikan mengurangi keterbacaan halaman web. Ini juga menambahkan mengasapi tambahan jika simbol diulangi di beberapa halaman dan Anda perlu mempertimbangkan bahwa versi lama IE tidak memiliki atau dukungan terbatas untuk SVG.
sumber
"Bukan ASCII (tidak satu pun ↑ / ↓)" membutuhkan kualifikasi.
Sementara karakter ini tidak didefinisikan dalam Kode Standar Amerika untuk Pertukaran Informasi sebagai mesin terbang, kode mereka biasanya digunakan untuk memberikan presentasi grafis untuk kode ASCII 24 dan 25 (hex 18 dan 19, CANcel dan EM: End of Medium). Kode halaman 437 (disebut Extended ASCII oleh IBM, termasuk kode numerik 128 hingga 255) mendefinisikan penggunaan mesin terbang ini sebagai kode ASCII dan keberadaan konvensi-konvensi ini meresap dalam industri seperti yang dilihat oleh penyebaran mereka sebagai standar oleh perusahaan-perusahaan terkemuka seperti HP, khususnya untuk printer, dan IBM, terutama untuk mikrokomputer yang dimulai dengan PC asli.
Seperti halnya penggunaan kode ASCII untuk CAN dan EM yang relatif usang pada saat itu, membenarkan penggunaannya sebagai mesin terbang, begitu pula dengan berlalunya waktu menjadikan penggunaan kode sebagai mesin terbang usang dengan penggunaan konvensi UNICODE saat ini.
Harus ditekankan bahwa ekstensi ke ASCII yang dibuat oleh IBM dalam Extended ASCII, tidak hanya mencakup set numerik yang lebih besar untuk kode numerik 128 hingga 255, tetapi juga memperluas penggunaan beberapa kode kontrol numerik, dalam rentang ASCII 0 hingga 32, dari hanya protokol kontrol transmisi media untuk memasukkan mesin terbang. Sering diasumsikan, secara keliru, bahwa 0 hingga 128 pertama tidak "diperpanjang" dan bahwa IBM menggunakan mesin terbang ASCII konvensional untuk kisaran ini. Kesalahan ini juga dilakukan di salah satu referensi sebelumnya. Kesalahan ini menjadi sangat meresap sehingga secara sehari-hari mendefinisikan kembali ASCII secara subliminal.
sumber
Saya tahu saya terlambat ke pesta, tetapi Anda juga dapat melakukannya dengan CSS biasa:
HTML:
(Ini bisa berupa elemen HTML apa pun, jika Anda menggunakan elemen inline seperti
<span>
misalnya, pastikan Anda menjadikannya elemen blok / inline-blok dengandisplay:block;
ataudisplay:inline-block
) :<div class="up"></div>
dan
<div class="down"></div>
CSS:
Anda juga dapat melakukannya menggunakan
:before
dan:after
elemen pseudo, yang sebenarnya merupakan cara yang lebih baik karena Anda menghindari membuat markup tambahan. Tetapi itu terserah Anda bagaimana Anda ingin mencapainya.-
Berikut ini Demo di CodePen dengan banyak kemungkinan panah.
sumber
Banyak orang di sini menyarankan untuk menggunakan segitiga, tetapi kadang-kadang Anda membutuhkan chevron.
Kami memiliki kasus di mana tombol kami menunjukkan chevron, dan ingin manual pengguna merujuk ke tombol dengan cara yang akan dikenali oleh pengguna non-teknis juga. Jadi kami membutuhkan tanda chevron.
Kami menggunakan ﹀ pada akhirnya. Ini dikenal sebagai FORMULIR PRESENTASI UNTUK BRACKET KANAN VERTIKAL KANAN dan kode-nya adalah U + FE40.
sumber
Biasanya, yang terbaik adalah melihat karakter dalam konteksnya.
Berikut adalah daftar lengkap karakter Unicode , dan bagaimana browser Anda saat ini menampilkannya. Saya melihat daftar ini berkembang, versi browser setelah yang lain.
Daftar ini diperoleh dengan iterasi dalam desimal dari tabel html entitas unicode, mungkin butuh beberapa detik, tetapi sangat berguna bagi saya dalam banyak kasus.
Dengan melayang dengan cepat char yang diberikan Anda akan mendapatkan dec dan hex dan cara pintas untuk menghasilkannya dengan keyboard.
Cuplikan yang sama dengan bookmarklet:
Untuk menghasilkan daftar itu dari php :
Untuk membuat daftar itu ke konsol, gunakan php :
Berikut ini adalah ekstrak teks biasa, panah, ada yang datang dengan unicode 10.0 . http://unicode.org/versions/Unicode10.0.0/
🔙🔚🔛🔜🔝🖗🖘🖙🖚🖛🖜🖝🖞🖟🞀🞁🞂🞃🔺🔻🔼🔽𝆒𝆓𐃘⭝⭞⭟⭠⭡⭢⭣⭤⭥⭦⭧⭨⭩⭪⭫⭬⭭⭮⭯⭰⭱⭲⭳⭶⭷ ⭸⭹⭺⭻⭼⭽⭾⭿⮀⮁⮂⮃⮄⮅⮆⮇⮈⮉⮊⮋⮌⮍⮎⮏⮐⮑⮒⮓⮔⮕⮘⮙⮚⮛⮜⮝⮞⮟⮠⮡⮢⮣⮤⮥⮦⮧⮨⮩⮪⮫ ⮬⮭⮮⮯⮰⮱⮲⮳⮴⮵⮶⮷⮸⮹⮽⮾⮿⯀⯁⯂⯅⯆⯇⯈⬶⬷⬸⬹⬺⬻⬼⬽⬾⬀⬁⬂⬃⬄⬅⬆⬇⬈⬉⬊⬋⬌⬍⬎⬏⬐ ⬑⤀⤁⤂⤃⤄⤅⤆⤇⤈⤉⤊⤋⤌⤍⤎⤏⤐⤑⤒⤓⤔⤕⤖⤗⤘⤙⤚⤛⤜⤝⤞⤟⤠⤡⤢⤣⤤⤥⤦⤧⤨⤩⤪⤫⤬⤭⤮⤯⤰ ⤱⤲⤳⤴⤵⤶⤷⤸⤹⤺⤻⤼⤽⤾⤿⥀⥁⥂⥃⥄⥅⥆⥇⥈⥉⥊⥋⥌⥍⥎⥏⥐⥑⥒⥓⥔⥕⥖⥗⥘⥙⥚⥛⥜⥝⥞⥟⥠⥡⥢ ⥣⥤⥥⥦⥧⥨⥩⥪⥫⥬⥭⥮⥯⥰⥱⥲⥳⥴⥵⟨⟩⟪⟫⟬⟭⟮⟯⟰⟱⟲⟳⟴⟵⟶⟷⟸⟹⟺⟻⟼⟽⟾⟿➘➙➚➛➜➝➞ ➟➠➡➢➣➤➥➦➧➨➩➪➫➬➭➮➯➰➱➲➳➴➵➶➷➸➹➺➻➼➽➾⊲⊳⊴⊵ ← ↑ → ↓ ↔↕↖↗↘↙↚↛↜↝ ↞↟↠↡↢↣↤↥↦↧↨↩↪↫↬↭↮↯↰↱↲↳↴↵↶↷↸↹↺↻↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⇈⇉⇊⇋⇌⇍⇎⇏ ⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇚⇛⇜⇝⇞⇟⇠⇡⇢⇣⇤⇥⇦⇧⇨⇩⇪⇫⇬⇭⇮⇯⇰⇱⇲⇳⇴⇵⇶⇷⇸⇹⇺⇻⇼⇽⇾⇿ᐂᐃᐄᐅᐆᐇᐈᐉᐊᐋᐌᐍᐎᐏᐐᐑᐒᐓᐔᐕᐖᐗᐘᐙᐚᐛᐫᐬᐭᐮᐯᐰᐱᐲᐳᐴᐵᐶᐷᐸᐹᐺᐻᐼᐽᐾᐿᑀᑁᑂᑃᑄᑅᑆᑇᑈ🞀 🞁🞂🞃🠀🠁🠂🠃🠄🠅🠆🠇🠈🠉🠊🠋🠐🠑🠒🠓🠔🠕🠖🠗🠘🠙🠚🠛🠜🠝🠞🠟🠠🠡🠢🠣🠤🠥🠦🠧🠨🠩🠪🠫🠬🠭🠮🠯🠰🠱🠲 🠳🠴🠵🠶🠷🠸🠹🠺🠻🠼🠽🠾🠿🡀🡁🡂🡃🡄🡅🡆🡇🡐🡑🡒🡓🡔🡕🡖🡗🡘🡙🡠🡡🡢🡣🡤🡥🡦🡧🡨🡩🡪🡫🡬🡭🡮🡯🡰🡱🡲 🡳🡴🡵🡶🡷🡸🡹🡺🡻🡼🡽🡾🡿🢀🢁🢂🢃🢄🢅🢆🢇🢐🢑🢒🢓🢔🢕🢖🢗🢘🢙🢚🢛🢜🢝🢞🢟🢠🢡🢢🢣🢤🢥🢦🢧🢨🢩🢪🢫
sumber
Entitas HTML untuk segitiga kosong
◁ =
◁
▷ =
▷
▽ =
▽
△ =
△
sumber
▲ ▼ Ini adalah U + 25B2 (
▲
) dan U + 25BC (▼
) masing-masingsumber
Saya pikir penanya mungkin merujuk pada salah satu dari ini (lihat gambar terlampir) - Saya menemukan pertanyaan StackOverflow ini saat mencari hal yang sama.
Sayangnya, mesin terbang ini tampaknya tidak ada sebagai entitas karakter yang berbeda di mana pun. Wikipedia mencapainya di bawah ini dengan menggunakan javascript sebaris dan konten img = "data: image / gif ..." untuk mencapai simbol.
Kebetulan, inilah base64 untuk itu:
Semoga ini bisa membantu seseorang!
sumber
Yang ini sepertinya menyiratkan bahwa 030 dan 031 adalah segitiga naik dan turun.
(Seperti yang ditunjukkan bobince, ini sepertinya bukan standar ASCII)
sumber
Saya menggunakan ▼ dan ▲, tetapi mereka mungkin tidak cocok untuk Anda. Saya menggunakan alt 11551 untuk yang pertama dan 11550 untuk yang kedua. Anda selalu dapat menyalinnya jika ascii tidak sama dengan sistem Anda.
sumber
Saya memutuskan bahwa simbol paling populer yang direkomendasikan di sini (▼ dan ▲) terlihat terlalu tebal, jadi di situs codepoints.net, direkomendasikan oleh pengguna ADJenks, saya menemukan simbol-simbol ini yang terlihat lebih baik untuk selera saya: 🞀 (U + 1F780) 🞁 (U + 1F781) 🞂 (U + 1F782) 🞃 (U + 1F783)
sumber
Situs yang saya suka gunakan untuk ini adalah codepoints.net
Berikut ini pencarian kata "panah" dan "segitiga": https://codepoints.net/search?q=arrowhead+triangle
Ini memiliki beberapa kecocokan untuk "panah berkepala segitiga" yang memiliki batang, tetapi hanya ada 4 halaman kecil untuk dilewati dan ada banyak kecocokan yang bagus dengan detail bagus pada setiap karakter.
Ada juga blok kode untuk "Simbol dan Panah Lain-Lain" dan situs web ini mencantumkannya di sini: https://codepoints.net/miscellaneous_symbols_and_arrows
sumber
Ini satu lagi - ᐞ - Unicode U + 141E / CANADIAN SYLLABICS GLOTTAL STOP
sumber