Centang simbol dalam HTML / XHTML

279

Kita perlu menampilkan simbol centang (✓ atau ✔) dalam aplikasi web internal dan idealnya ingin menghindari menggunakan gambar.

Harus bekerja mulai dengan IE 6.0.2900 pada kotak XP, idealnya kita perlu cross-browser (IE + versi terbaru dari FF).

Kotak-kotak berikut menampilkan meskipun mengatur encoding browser ke UTF-8 (META berfungsi dengan baik dan tidak masalah). Font default adalah Times New Roman (mungkin menjadi masalah, tetapi mencoba Lucida Sans Unicode tidak membantu dan saya tidak memiliki Arial Unicode MS, atau Lucida Grande yang diinstal).

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

Setiap bantuan dihargai.

Berikut ini berfungsi di bawah IE 6.0 dan IE 7:

<html>
<head>

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

Saya akan sangat menghargai jika seseorang dapat memeriksa FF di Windows. Saya cukup yakin itu tidak akan berfungsi pada kotak non Windows.

html xhtml Vlad Gudim
sumber
1
Seperti apakah simbol kutu itu?
John Feminella
Pernahkah
Sam Hasler
2
Sam, tolong lihat pertanyaannya.
Vlad Gudim
@ Tagophil, saya tahu itu berbicara tentang entitas yang sama, tetapi juga menyarankan agar server mengirim header HTTP yang sebenarnya Content-Type: text / html; charset = utf-8 serta masalah yang font yang digunakan mungkin tidak mengandung mesin terbang untuk karakter yang digunakan.
Sam Hasler
Berikut adalah pasangan: amp-what.com/#q=check%20mark & # x2713 & # x2714
ndp

Jawaban:

454

Saya pikir Anda menggunakan nilai Unicode yang kurang didukung, yang tidak selalu memiliki mesin terbang untuk semua poin kode.
Coba karakter berikut:

  • ☐ ( 0x2610 dalam Unicode heksadesimal [HTML desimal: &#9744;]): kotak centang kosong (tidak dicentang)
  • ☑ ( 0x2611 [HTML desimal: &#9745;]): versi yang dicentang dari kotak centang sebelumnya
  • ✓ ( 0x2713 [HTML desimal: &#10003;])
  • ✔ ( 0x2714 [HTML desimal: &#10004;])

Sunting: Tampaknya ada beberapa kebingungan tentang simbol pertama di sini, ☐ / 0x2610. Ini adalah kotak centang kosong (tidak dicentang), jadi jika Anda melihat sebuah kotak, itulah yang seharusnya terlihat. Ini adalah mitra untuk ☑ / 0x2611, yang merupakan versi yang diperiksa.

John Feminella
sumber
1
Penyiapan perusahaan: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
Vlad Gudim
Yang pertama adalah sebuah kotak bagi saya, sisanya berfungsi dengan baik. Meskipun, saya akan menggunakan gambar sebagai gantinya, hanya untuk memastikan.
mbillard
6
Untuk lebih jelasnya, gambar pertama seharusnya berupa kotak - ini adalah kotak centang kosong!
John Feminella
1
@ Tagophil: Ah, oke. Saya menggunakan Ubuntu, dan font sans default yang saya konfigurasikan di FF memiliki mesin terbang ini. Di Windows, cukup gunakan peta karakter untuk mencari mesin terbang ini dan lihat apakah font yang Anda inginkan memilikinya. Jika tidak, Anda harus memilih yang lain.
John Feminella
5
Kode desimal kotak kosong: 0x2610 -> 9744. jadi kode HTML akan mirip &#9744;dengan kotak centang: 0x2611 -> 9745 & kode HTML&#9745;
Vikas
272

Pertama, Anda harus menyadari bahwa Anda sebenarnya tidak perlu menggunakan entitas HTML - selama pengkodean dokumen HTML Anda dinyatakan dengan benar sebagai UTF-8, Anda cukup menyalin / menempelkan simbol-simbol ini ke skrip file / server-side Anda / JavaScript / apa pun.

Karena itu, berikut adalah daftar lengkap semua karakter UTF-8 / entitas HTML terkait dengan topik ini:

  • ☐ (hex: &#x2610;/ dec:): &#9744;kotak suara (kosong, begitulah seharusnya)
  • ☑ (hex: &#x2611;/ dec:): &#9745;kotak suara dengan tanda centang
  • ☒ (hex: &#x2612;/ dec:): &#9746;kotak suara dengan x
  • ✓ (hex: &#x2713;/ dec:): &#10003;tanda centang, setara dengan &checkmark;dan &check;di sebagian besar browser
  • ✔ (hex: &#x2714;/ dec:): &#10004;tanda centang berat
  • ✗ (hex: &#x2717;/ dec :) &#10007;: pemungutan suara x
  • ✘ (hex: &#x2718;/ dec:): &#10008;surat suara berat x
  • 🗸 (⚠ hex: &#x1F5F8;/ dec &#128504;): tanda centang ringan (kurang didukung pada 2017)
  • ✅ (⚠ hex: &#x2705;/ dec :): &#9989;tanda centang putih berat (dukungan campuran pada 2017)
  • 🗴 (⚠ hex: &#x1F5F4;/ dec :): &#128500;skrip suara X (kurang didukung pada 2017)
  • 🗶 (⚠ hex: &#x1F5F6;/ dec :): &#128502;skrip surat suara X (tidak didukung pada 2017)
  • ⮽ (⚠ hex: &#x2BBD;/ dec :): &#11197;kotak suara dengan cahaya X (kurang didukung pada 2017)
  • 🗵 (⚠ hex: &#x1F5F5;/ dec :): &#128501;kotak suara dengan skrip X (kurang didukung pada 2017)
  • 🗹 (⚠ hex: &#x1F5F9;/ dec :): &#128505;kotak suara dengan cek tebal (kurang didukung pada 2017)
  • 🗷 (⚠ hex: &#x1F5F7;/ dec :): &#128503;kotak suara dengan huruf tebal X (kurang didukung pada 2017)

Memeriksa font web untuk simbol centang? Berikut ini contoh yang siap digunakan untuk yang lebih umum: A☐B☑C☒D✓E✔F✗G✘H- cukup salin / tempel ini ke kotak teks sampel penyedia webfont Anda dan lihat font mana yang mendukung simbol centang apa.

Bogdan Stăncescu
sumber
17

Mesin klien membutuhkan font yang tepat yang memiliki mesin terbang untuk karakter ini untuk menampilkannya. Tetapi Times New Roman tidak. Coba Arial Unicode MS atau Lucida Grande sebagai gantinya:

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

Ini berfungsi untuk saya di Windows XP di IE 5.5, IE 6.0, FF 3.0.6.

Gumbo
sumber
Belum punya font, hanya Lucida Sans Unicode yang tampak seperti font unicode tetapi tidak memiliki tanda centang.
Vlad Gudim
Kemudian daftar beberapa font yang memiliki mesin terbang untuk karakter ini: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.
Gumbo
Gumbo, tidak bekerja. Selain itu saya tidak menginstal Arial Unicode MS dan Lucida Grande.
Vlad Gudim
Ini sedekat yang Anda dapatkan, tetapi sayangnya Lucida Sans Unicode tidak memasok U + 2713/2714.
bobince
13

Saya biasanya menggunakan fontawesome font ( http://fontawesome.io/icon/check/ ), Anda dapat menggunakannya dalam file html: 

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

atau dalam css:

content: "\f00c";
font-family: FontAwesome;
Stefan
sumber
11

Mengapa Anda tidak menggunakan elemen kotak centang input HTML dalam mode hanya baca

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

Saya menganggap ini akan berfungsi pada semua browser.

Drejc
sumber
6
Kami tidak memerlukan kontrol, hanya indikasi bahwa opsi tertentu tersedia dalam matriks. Menggunakan kontrol yang dinonaktifkan akan salah dalam kasus ini.
Vlad Gudim
11

Saya mengalami masalah yang sama dan tidak ada saran yang berhasil (Firefox pada Windows XP).

Jadi saya menemukan solusi yang mungkin menggunakan data gambar untuk menampilkan tanda centang kecil:

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

Tentu saja Anda dapat membuat gambar tanda centang sendiri dan menggunakan konverter untuk menambahkannya sebagai data: gambar / gif. Semoga ini membantu.

Kai Noack
sumber
8

meskipun menetapkan pengodean browser ke UTF-8

(Jika Anda menggunakan referensi karakter numerik tentu saja tidak masalah pengkodean apa yang digunakan, browser akan mendapatkan titik kode Unicode yang benar langsung dari nomor tersebut.)

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

Saya akan sangat menghargai jika seseorang dapat memeriksa FF di Windows. Saya cukup yakin itu tidak akan berfungsi pada kotak non Windows.

Gagal bagi saya di Firefox 3, Opera, dan Safari. Anehnya, bekerja di browser Webkit lainnya, Chrome. Juga gagal di Linux (jelas, karena Wingdings tidak diinstal di sana; itu diinstal pada Mac, tetapi itu tidak membantu Anda jika Safari tidak memilikinya).

Juga ini adalah hack yang cukup jahat - karakter itu untuk semua maksud dan tujuan "ü" dan akan muncul seperti itu untuk hal-hal seperti mesin pencari, atau jika teksnya disalin dan ditempel. Poin kode Unicode yang tepat adalah cara untuk digunakan kecuali Anda benar-benar tidak memiliki alternatif.

Masalahnya adalah bahwa tidak ada font yang dibundel dengan Windows yang memasok U + 2713 CHECK MARK ('✓'). Satu-satunya yang kemungkinan besar Anda temukan pada mesin Windows adalah "Arial Unicode MS", yang sebenarnya tidak bisa diandalkan. Jadi pada akhirnya saya pikir Anda harus:

  • gunakan karakter berbeda yang didukung lebih baik (mis. '●' - bullet , seperti yang digunakan oleh SO), atau
  • gunakan gambar, dengan '✓' sebagai teks alt.
bobince
sumber
8

Datang sangat terlambat ke pesta, saya mendapati bahwa &check;(✓) bekerja di Opera. Saya belum mengujinya di browser lain, tetapi mungkin bermanfaat bagi sebagian orang.

rossum
sumber
4
Patut dicatat bahwa &check;(dan &checkmark;) keduanya mengevaluasi &#10003;, yang digunakan oleh jawaban teratas. Ini adalah karakter HTML5 dan tidak akan berfungsi di IE6.
James Donnelly
5 
.className {
   content: '\&#x2713';
}

Menggunakan Properti konten CSS Anda dapat menunjukkan centang dengan gambar atau kode lainnya.

s-sharma
sumber
Tidak yakin: w3schools.com/cssref/pr_gen_content.asp menunjukkan comapatibily dengan firefox
s-sharma
todomvc.com/labs/architecture-examples/react periksa apakah berfungsi atau tidak karena mereka menggunakan konten untuk tanda centang.
s-sharma
4
Jika Anda ingin menggunakan kode utf-8 dalam konten css, dengan cara ini dimungkinkan:.class{ content: "\2713"; }
Morteza Ziyae
4

Apakah √ (simbol akar kuadrat, & # 8730;) sudah cukup?

Atau, pastikan Anda mengatur Content-Type:tajuk sebelum mengirim data ke browser. Hanya menentukan <meta>tag tipe konten mungkin tidak cukup untuk mendorong browser menggunakan set karakter yang benar.

Ian Kemp
sumber
Terima kasih! Root kuadrat berfungsi, tetapi terlihat sedikit seperti errr ... root kuadrat? Tapi saya kira dalam ketiadaan alternatif yang mungkin akan sedekat ini.
Vlad Gudim
1
Btw, menentukan tag meta mengatur UTF-8 dengan baik pada IE saya, jadi dalam hal ini bukan itu masalahnya.
Vlad Gudim
1
Akar kuadrat adalah akar kuadrat dan tanda centang centang adalah tanda centang centang. Bagiku terasa seperti meletakkan pictogram toilet ke pintu ruang ganti.
Volker E.
1
@VolkerE. Tapi itu akan sangat lucu!
Dave Newton
3

Solusi menggunakan Wingdings yang tidak berbasis unicode dan tidak berfungsi di Linux tanpa Wingdings terpasang.

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

Anda bisa menggunakan ⊕ atau ⊗

Gabriel Solomon
sumber
1
Itu bukan tanda centang, itu dilingkari plus / minus.
GKFX
0

Anda dapat menambahkan yang putih kecil dengan Base64 Encoded GIF ( generator online di sini ):

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

Dengan Chrome, misalnya, saya menggunakannya untuk mengatur kontrol kotak centang:

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

Jika Anda hanya menginginkannya dalam tag IMG, Anda akan melakukan tanda centang / centang sebagai:

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

Menggunakan WebDing atau Wingding font adalah satu-satunya cara untuk mencapai tujuan topik ini: ia harus bekerja dimulai dengan IE 6.0.2900 . Karena itu saya akan memposting beberapa di sini, serta beberapa koreksi untuk diposting di atas:

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>
Luaskan cuplikan

Referensi di sini: Wingdings Webdings

Dmitry Babich
sumber