Unicode-Zeichen für "X" abbrechen / schließen?

Ich möchte eine Schaltfläche zum Schließen nur mit CSS erstellen.

Ich bin mir sicher, dass ich nicht der Erste bin, der dies tut. Weiß also jemand, welche Schriftart ein 'x' hat, das der Breite der Höhe entspricht, sodass sie browserübergreifend verwendet werden kann, um wie eine Schaltfläche zum Schließen auszusehen?

✖ funktioniert wirklich gut. Der HTML-Code lautet ✖.

Was ist mit der Verwendung der × -Marke (des Multiplikationssymbols) ×in HTML dafür?

"x" (Buchstabe) sollte nicht verwendet werden, um etwas anderes als den Buchstaben X darzustellen.

× ×oder ×(dasselbe) U + 00D7-Multiplikationszeichen

× gleiches Zeichen mit starker Schriftstärke

⨯ ⨯U + 2A2F Gibbs-Produkt

✖ ✖U + 2716 schweres Multiplikationszeichen

Es gibt auch ein Emoji, wenn Sie es unterstützen. Wenn Sie dies nicht tun, haben Sie gerade ein Quadrat gesehen =❌

Ich habe dieses einfache Codebeispiel auch für Codepen erstellt, als ich mit einem Designer zusammengearbeitet habe, der mich gebeten hat, ihr zu zeigen, wie es aussehen würde, als ich gefragt habe, ob ich Ihre Schaltfläche zum Schließen durch eine codierte Version anstelle eines Bildes ersetzen könnte.

<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

Wenn Sie die oben genannten Zeichen aus CSS verwenden möchten ( z. B. in einem :beforeoder :afterPseudo), verwenden Sie einfach den maskierten \Unicode-HEX-Wert, z. B.:

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

Verwenden Sie Beispiele für verschiedene Sprachen :

• ✕ HTML
• '\2715' CSS wie dh:.clear:before { content: '\2715'; }
• '\u2715' JavaScript- Zeichenfolge

✕ ist eine weitere großartige, die nicht zu dick ist. Der HTML-Code lautet ✕oder2715 in hex.

Wie @Haza betonte, kann das Zeitsymbol verwendet werden. Twitter Bootstrap ordnet diese zu einem Schließen - Symbol für Inhalte wie Modalverben und Warnungen zu entlassen.

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

Ich bevorzuge Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

Das Symbol, nach dem Sie suchen würden, ist fa-times. So einfach ist das:

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

Geige hier

Dies ist wahrscheinlich Pedanterie, aber bisher hat niemand wirklich eine Lösung gegeben, "um eine Schaltfläche zum Schließen nur mit CSS zu erstellen". nur. Bitte schön:

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

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

Es gibt eine andere, die hier nicht erwähnt wird - schön dünn - wenn Sie einen solchen Look für Ihr Projekt benötigen: ╳

╳ or decimal: ╳

×und font-family: Garamond, "Apple Garamond";mach es gut genug. Die Garamond-Schrift ist dünn und web-sicher

Das funktioniert gut für mich:

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

Vergessen Sie eine Schriftart und verwenden Sie ein Hintergrundbild!

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

Dies ist für Benutzer, die die Seite mit einem Bildschirmleser besuchen, leichter zugänglich.

Dies ist für Leute, die ihre Xkleinen / großen und roten machen wollen !

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

Sie können Text verwenden, auf den Bildschirmleser nur zugreifen können, indem Sie ihn in einem Bereich platzieren, den Sie auf zugängliche Weise ausblenden. Platzieren Sie das x im CSS, das von Bildschirmleseprogrammen nicht gelesen werden kann, daher nicht verwirrt, aber auf der Seite sichtbar und auch für Tastaturbenutzer zugänglich ist.

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

Mit modernen Browsern können Sie ein + -Zeichen drehen:

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

Dann platzieren Sie einfach das folgende HTML, wo Sie es brauchen:

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

×ist besser als ✖so ✖seltsam in Rand- und Internet Explorer (in IE11 getestet) verhält. Es bekommt nicht die richtige Farbe und wird durch ein "Emoji" ersetzt