Znak Unicode dla „X” anulować / zamknąć?

Chcę utworzyć przycisk zamykania, używając tylko CSS.

Jestem pewien, że nie jestem pierwszym, który to robi, więc czy ktoś wie, która czcionka ma „x” tej samej szerokości co wysokość, aby można było używać jej w różnych przeglądarkach, by wyglądała jak przycisk zamykania?

✖ działa naprawdę dobrze. Kod HTML to ✖.

Co powiesz na użycie w tym celu znaku x (symbol mnożenia) ×w HTML?

„x” (litera) nie powinno być używane do reprezentowania niczego poza literą X.

× ×lub ×(to samo) znak mnożenia U + 00D7

× ten sam znak o dużej gramaturze czcionki

⨯ ⨯Produkt Gibbs U + 2A2F

✖ ✖U + 2716 ciężki znak mnożenia

Istnieje również emoji ❌, jeśli go obsługujesz. Jeśli nie, po prostu zobaczyłeś kwadrat =❌

Zrobiłem ten prosty przykład kodu na Codepen, kiedy pracowałem z projektantem, który poprosił mnie, żebym pokazał jej, jak to będzie wyglądać, gdy zapytam, czy mogę zastąpić twój przycisk zamykania kodowaną wersją, a nie obrazem.

<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

Jeśli chcesz użyć powyższych znaków z CSS (jak np .: in :beforelub :afterpseudo), po prostu użyj uciekającej \wartości Unicode HEX, na przykład:

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

Użyj przykładów dla różnych języków :

• ✕ HTML
• '\2715' CSS jak np .:.clear:before { content: '\2715'; }
• '\u2715' Ciąg JavaScript

✕ to kolejny świetny, niezbyt gruby. Kod HTML jest ✕, lub 2715w hex.

Jak wskazał @Haza, można użyć symbolu czasu. Twitter Bootstrap mapuje to na ikonę zamykania w celu odrzucenia treści, takich jak modały i alerty.

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

Wolę Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

Ikona, której szukasz, to fa-times. Korzystanie z tego jest tak proste:

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

Fiddle tutaj

Jest to prawdopodobnie pedanteria, ale jak dotąd nikt tak naprawdę nie podał rozwiązania „utworzenia przycisku zamykającego tylko przy użyciu CSS”. tylko. Proszę bardzo:

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

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

jest jeszcze jeden nie wymieniony tutaj - fajnie cienki - jeśli potrzebujesz tego rodzaju wyglądu dla swojego projektu: ╳

╳ or decimal: ╳

×i font-family: Garamond, "Apple Garamond";spraw, by było wystarczająco dobre. Czcionka Garamond jest cienka i bezpieczna dla sieci

To mi ładnie działa:

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

Zapomnij o czcionce i użyj obrazu tła!

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

Będzie to bardziej dostępne dla użytkowników odwiedzających stronę za pomocą czytnika ekranu.

To jest dla ludzi, którzy chcą, aby ich Xmałe / duże i czerwone!

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

Możesz użyć tekstu, który jest dostępny tylko dla czytników ekranu, umieszczając go w zakresie, który ukrywasz w przystępny sposób. Umieść x w CSS, który nie może być odczytany przez czytniki ekranu, więc nie pomyli, ale jest widoczny na stronie, a także dostępny dla użytkowników klawiatury.

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

Za pomocą nowoczesnych przeglądarek możesz obrócić znak +:

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

następnie po prostu umieść następujący kod HTML tam, gdzie potrzebujesz:

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

×jest lepiej niż ✖jak ✖zachowuje się dziwnie w EDGE i Internet Explorer (testowane w IE11). Nie ma odpowiedniego koloru i jest zastąpiony przez „emoji”