“X” unicode karakteri iptal / kapat?

Yalnızca CSS kullanarak bir kapatma düğmesi oluşturmak istiyorum.

Eminim bunu ilk yapan ben değilim, bu yüzden kimse hangi yazı tipinin yüksekliği ile aynı genişlikte 'x' olduğunu biliyor, böylece bir kapat düğmesi gibi görünmek için çapraz tarayıcı kullanılabilir?

✖ gerçekten iyi çalışıyor. HTML kodu ✖.

Bunun için HTML'de × işaretini (çarpma sembolü) kullanmaya ne dersiniz ×?

"x" (harf), X harfinden başka bir şeyi temsil etmek için kullanılmamalıdır.

× ×veya ×(aynı şey) U + 00D7 çarpma işareti

× güçlü yazı tipi ağırlığı ile aynı karakter

⨯ ⨯U + 2A2F Gibbs ürünü

✖ ✖U + 2716 ağır çarpma işareti

Ayrıca bir emoji de var. Eğer yapmazsan bir kare gördün =❌

Ayrıca bu basit kod örneğini, kapat düğmenizi bir görüntü yerine kodlanmış bir sürümle değiştirip değiştiremeyeceğimi sorduğumda ona nasıl görüneceğini sorduğum bir tasarımcıyla çalışırken Codepen'de de yaptım.

<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

✕ ✕ ✓ ✓
✖ ✖ ✔ ✔

✗ ✗
✘✘

x × ×

CSS

Yukarıdaki karakterleri CSS'den kullanmak istiyorsanız (örneğin: an :beforeya da :aftersözde), sadece \örneğin, kaçan Unicode HEX değerini kullanın :

[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>

Farklı diller için örnekler kullanın :

• ✕ HTML
• '\2715' CSS gibi yani:.clear:before { content: '\2715'; }
• '\u2715' JavaScript dizesi

✕ çok kalın olmayan başka bir harika. HTML kodu ✕veya 2715onaltılıdır.

@Haza'nın belirttiği gibi zamanlar sembolü kullanılabilir. Twitter Bootstrap bunu modals ve uyarılar gibi içeriği kapatmak için yakın bir simgeyle eşler .

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

Font Awesome'i tercih ediyorum: http://fortawesome.github.io/Font-Awesome/icons/

Arayacağınız simge fa-times. Kullanımı bu kadar basit:

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

Burada keman çal

Bu muhtemelen bilgiçliktir, ancak şu ana kadar hiç kimse "yalnızca CSS kullanarak bir kapatma düğmesi oluşturmak için" gerçekten bir çözüm sunmadı. sadece. Hadi bakalım:

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

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

Burada bahsedilmeyen başka bir tane var - güzel ince - projeniz için bu tür bir görünüme ihtiyacınız varsa:

╳ or decimal: ╳

×ve font-family: Garamond, "Apple Garamond";yeterince iyi yap. Garamond yazı tipi ince ve web için güvenli

Bu benim için iyi çalışıyor:

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

Bir yazı tipini unutun ve arka plan resmi kullanın!

<!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>

Bu, bir ekran okuyucu ile sayfayı ziyaret eden kullanıcılar için daha erişilebilir olacaktır.

Bu Xküçük / büyük ve kırmızı yapmak isteyenler içindir !

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

Erişilebilir bir şekilde gizlediğiniz bir açıklığa yerleştirerek yalnızca ekran okuyucuları tarafından erişilebilen metni kullanabilirsiniz. Ekran okuyucular tarafından okunamayan, dolayısıyla karıştırılmayacak, ancak sayfada görülebilecek ve klavye kullanıcıları tarafından erişilebilen x'i CSS'ye yerleştirin.

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

Modern tarayıcıları kullanarak + işaretini döndürebilirsiniz:

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

o zaman aşağıdaki html'yi ihtiyacınız olan yere yerleştirin:

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

×daha iyidir ✖olarak ✖garip Kenar davranır ve (IE11 test) Internet explorer. Doğru rengi alamıyor ve yerine bir "emoji" geliyor