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

219

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?

Leonti
źródło

Odpowiedzi:

510

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

eipark
źródło
6
Pamiętaj, że musisz użyć czcionki obsługującej ten znak. Myślę, że DejaVu wygląda na to ładnie. Myślę, Lucida Sans Unicodea Arial Unicode MStakże obsługuję takie symbole Unicode. Jeśli nie użyjesz czcionki obsługującej te znaki w niektórych przeglądarkach (zwłaszcza w starym IE), otrzymasz prostokąty wskazujące nieobsługiwane symbole. Do takich symboli używam uproszczonej wersji DejaVu.
panzi
6
Nazywa się to „Heavy Multiplication X”, jak sądzę - fileformat.info/info/unicode/char/2716/index.htm
eipark
8
Dwa lata później ten komentarz sprawił, że mój projekt skopał tyle tyłka, którego szukałem!
NominalAeon
1
Teraz, gdybyśmy tylko mogli zmienić kolor w FireFoxie 32.0, jego kolor zawsze jest czerwony, nawet przy ustawianiu koloru css
Gerrit Brink
5
Kolejną (bardziej atrakcyjną opcją IMO) jest & # x2715;
Andrew Hendrie,
75

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.

Haza
źródło
14
Kierując się logiką - także x-razy powinny reprezentować tylko x razy. Powiedziałbym albo użyć obrazu, albo słowa close.
easwee 18.03.11
1
Tak, to też prawda, wiem.
Haza
9
„x” (litera) nie powinno być używane do reprezentowania niczego innego niż litera X. - kto to mówi? jeśli to tylko ty, jaka jest logika tego. dzięki
Valentin Kuzub,
1
Możesz także użyć znaku mnożenia „×”. Zaczerpnięte z tego pytania .
Kamil Sarna
1
Najlepsza odpowiedź IMHO. Myślę, że wszystkie przeglądarki będą to obsługiwać, a jeśli Bootstrap go używa ... zwykle postępują zgodnie z najlepszymi praktykami.
Rui Marques,
62

× ×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>
Davidcondrey
źródło
41

HTML

&#x2715;&#x2713;
&#x2716;&#x2714;

&#x2717;
&#x2718;

× &#x00d7; &times;

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 :

  • &#x2715; HTML
  • '\2715' CSS jak np .:.clear:before { content: '\2715'; }
  • '\u2715' Ciąg JavaScript
Roko C. Buljan
źródło
22

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

emlai
źródło
19

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>
John Lehmann
źródło
2
Pouczające, wskazując, że Bootstrap używa tego, ale jest to zduplikowana odpowiedź, jest taka sama jak @Haza.
Rui Marques,
7

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

prograhammer
źródło
To nie jest rozwiązanie CSS.
rnevius 17.04.15
3
@mevius Nie wiesz, co próbujesz powiedzieć? Czcionka Awesome nie wymaga javascript i są to czcionki. OP pyta „która czcionka ...”.
prograhammer
5

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

Steve Bennett
źródło
5

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

&#x2573; or decimal: &#9587;
Picard
źródło
4

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

prawidłowe zamknięcie X

Iggy
źródło
3

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>
lubar
źródło
2

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.

Richard JP Le Guen
źródło
2

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;
}
JMASTER B.
źródło
1

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>
judyofthewoods
źródło
1

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>
użytkownik 1432181
źródło
Lub możesz użyć <i class = 'material-icons'> zamknij </i> (z <head> <link href = " fonts.googleapis.com/icon?family=Material+Icons " rel = "arkusz stylów"> )
user1432181,
1

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

Raphael Pinel
źródło