Karakter Unicode untuk "X" batal / tutup?

Saya ingin membuat tombol tutup hanya menggunakan CSS.

Saya yakin saya bukan yang pertama melakukan ini, jadi apakah ada yang tahu font mana yang memiliki 'x' dengan lebar yang sama dengan tinggi, sehingga dapat digunakan lintas browser agar terlihat seperti tombol tutup?

✖ bekerja dengan sangat baik. Kode HTML adalah ✖.

Bagaimana dengan menggunakan tanda-x (simbol multiplikasi), × dalam HTML, untuk itu?

"x" (huruf) tidak boleh digunakan untuk mewakili hal lain selain huruf X.

× ×atau ×(hal yang sama) tanda multiplikasi U + 00D7

× karakter yang sama dengan bobot font yang kuat

⨯ ⨯produk Gibbs U + 2A2F

✖ ✖U + 2716 tanda multiplikasi berat

Ada juga emoji ❌ jika Anda mendukungnya. Jika tidak, Anda hanya melihat kotak =❌

Saya juga membuat contoh kode sederhana ini pada Codepen ketika saya bekerja dengan seorang desainer yang meminta saya untuk menunjukkan padanya seperti apa bentuknya ketika saya bertanya apakah saya bisa mengganti tombol tutup Anda dengan versi kode daripada gambar.

<ul>
  <li class="ele">
    <div class="x large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop large"><b></b><b></b><b></b><b></b></div>
    <div class="x t large"><b></b><b></b><b></b><b></b></div>
    <div class="x shift large"><b></b><b></b><b></b><b></b></div>
  </li>
  <li class="ele">
    <div class="x medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop medium"><b></b><b></b><b></b><b></b></div>
    <div class="x t medium"><b></b><b></b><b></b><b></b></div>
    <div class="x shift medium"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop small"><b></b><b></b><b></b><b></b></div>
    <div class="x t small"><b></b><b></b><b></b><b></b></div>
    <div class="x shift small"><b></b><b></b><b></b><b></b></div>
    <div class="x small grow"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x switch"><b></b><b></b><b></b><b></b></div>
  </li>
</ul>

HTML

✕ ✕ ✓ ✓
✖ ✖ ✔ ✔

✗ ✗
✘✘

× × ×

CSS

Jika Anda ingin menggunakan karakter di atas dari CSS (seperti misalnya: dalam :beforeatau :afterpseudo) cukup gunakan nilai \Unicode HEX kabur , seperti misalnya:

[class^="ico-"], [class*=" ico-"]{
  font: normal 1em/1 Arial, sans-serif;
  display: inline-block;
}


.ico-times:before{ content: "\2716"; }
.ico-check:before{ content: "\2714"; }

<i class="ico-times"></i>
<i class="ico-check"></i>

Gunakan contoh untuk berbagai bahasa :

• ✕ HTML
• '\2715' CSS seperti:.clear:before { content: '\2715'; }
• '\u2715' String JavaScript

✕ adalah salah satu yang bagus yang tidak terlalu tebal. Kode HTML adalah ✕, atau 2715dalam hex.

Seperti @Haza tunjukkan simbol waktu dapat digunakan. Twitter Bootstrap memetakan ini ke ikon tutup untuk mengabaikan konten seperti modals dan peringatan.

<button class="close">&times;</button>

Saya lebih suka Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

Ikon yang Anda cari adalah fa-times. Sesederhana ini untuk digunakan:

<button><i class="fa fa-times"></i> Close</button>

Biola di sini

Ini mungkin kesedihan, tetapi sejauh ini tidak ada yang benar-benar memberikan solusi "untuk membuat tombol tutup hanya menggunakan CSS." hanya. Ini dia:

#close:before {
  content: "✖";
  border: 1px solid gray;
  background-color:#eee;
  padding:0.5em;
  cursor: pointer;
}

http://codepen.io/anon/pen/VaWqYg

ada satu lagi yang tidak disebutkan di sini - kurus bagus - jika Anda memerlukan jenis mencari proyek Anda: ╳

╳ or decimal: ╳

×dan font-family: Garamond, "Apple Garamond";membuatnya cukup baik. Font Garamond tipis dan aman untuk web

Ini bekerja dengan baik untuk saya:

<style>
a.closeX {
    position: absolute;
    right: 0px; top: 0px; width:20px;
    background-color: #FFF; color: black;
    margin-top:-15px; margin-right:-15px; border-radius: 20px;
    padding-left: 3px; padding-top: 1px;
    cursor:pointer; z-index: -1;
    font-size:16px; font-weight:bold;
}
</style>
<div id="content">
    <a class="closeX" id="closeX" onclick='$("#content").hide();'>&#10006;</a>
    Click "X" to close this box
</div>

Lupakan font dan gunakan gambar latar belakang!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
        <title>Select :after pseudo class/element</title>
        <style type="text/css">
            .close {
                background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png) NO-REPEAT -96px -128px;
                text-indent:-10000px;
                width:20px;
                height:20px;
            }
        </style>
    </head>
    <body>
        <input type="button" class="close" value="Close" />
        <button class="close">Close</button>
    </body>
</html>

Ini akan lebih mudah diakses oleh pengguna yang mengunjungi halaman dengan pembaca layar.

Ini untuk orang yang ingin membuat Xkecil / besar dan merah!

HTML:

<div class="col-sm-2"> <span><div class="red-x">&#10006;</div></span>
    <p>close</p>
</div>

<div class="red-x big-x">&#10006;</div>

CSS:

.red-x {
color: red;
}

.big-x {
font-size: 70px;
text-align: center;
}

Anda dapat menggunakan teks yang hanya dapat diakses oleh pembaca layar dengan menempatkannya dalam rentang yang Anda sembunyikan dengan cara yang dapat diakses. Tempatkan x di CSS yang tidak dapat dibaca oleh pembaca layar, sehingga tidak akan membingungkan, tetapi terlihat pada halaman, dan juga dapat diakses oleh pengguna keyboard.

<style>
.hidden {opacity:0; position:absolute; width:0;}
.close {padding:4px 8px; border:1px solid #000; background-color:#fff; cursor:pointer;}
.close:before {content:'\00d7'; color:red; font-size:2em;}
</style>

<button class="close"><span class="hidden">close</span></button>

Menggunakan browser modern, Anda dapat memutar tanda +:

.popupClose:before {
    content:'+';
}
.popupClose {
    position:relative;
    float:right;
    right:10px;
    top:0px;
    padding:2px;
    cursor:pointer;
    margin:2px;
    color:grey;
    font-size:32pt;
    transform:rotate(45deg);
}

maka cukup letakkan html berikut di tempat yang Anda butuhkan:

 <span class='popupClose'></span>

×lebih baik dari ✖yang ✖berperilaku aneh di Ujung dan Internet explorer (diuji dalam IE11). Itu tidak mendapatkan warna yang tepat dan digantikan oleh "emoji"