¿Carácter Unicode para "X" cancelar / cerrar?

Quiero crear un botón de cierre usando solo CSS.

Estoy seguro de que no soy el primero en hacer esto, entonces, ¿alguien sabe qué fuente tiene una 'x' del mismo ancho que la altura, para que pueda usarse en el navegador cruzado para que parezca un botón de cierre?

✖ funciona muy bien. El código HTML es ✖.

¿Qué pasa con el uso de la marca × (el símbolo de multiplicación), × en HTML, para eso?

"x" (letra) no debe usarse para representar otra cosa que no sea la letra X.

× ×o ×(lo mismo) U + 00D7 signo de multiplicación

× mismo carácter con un fuerte peso de fuente

⨯ Producto ⨯U + 2A2F Gibbs

✖ ✖U + 2716 signo de multiplicación pesada

También hay un emoji ❌ si lo soportas. Si no lo haces, acabas de ver un cuadrado =❌

También hice este sencillo ejemplo de código en Codepen cuando estaba trabajando con un diseñador que me pidió que le mostrara cómo se vería cuando le pregunté si podía reemplazar su botón de cierre con una versión codificada en lugar de una imagen.

<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

Si desea usar los caracteres anteriores de CSS (como, por ejemplo, en una :beforeo :afterpseudo) simplemente use el \valor HEX Unicode escapado , como por ejemplo:

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

Use ejemplos para diferentes idiomas :

• ✕ HTML
• '\2715' CSS como es decir:.clear:before { content: '\2715'; }
• '\u2715' Cadena de JavaScript

✕ es otro excelente que no es demasiado grueso. El código HTML es ✕, o 2715en hexadecimal.

Como señaló @Haza, se puede usar el símbolo de tiempos. Twitter Bootstrap asigna esto a un ícono de cierre para descartar contenido como modales y alertas.

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

Prefiero Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

El ícono que estaría buscando es fa-times. Es tan simple como esto usar:

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

Violín aquí

Probablemente se trate de pedantería, pero hasta ahora nadie ha dado realmente una solución "para crear un botón de cierre utilizando solo CSS". solamente. Aqui tienes:

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

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

hay otro que no se menciona aquí, muy bueno, si necesita ese tipo de aspecto para su proyecto: ╳

╳ or decimal: ╳

×y font-family: Garamond, "Apple Garamond";que sea lo suficientemente bueno. La fuente Garamond es delgada y segura para la web

Esto funciona muy bien para mí:

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

¡Olvídate de una fuente y usa una imagen de fondo!

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

Esto será más accesible para los usuarios que visiten la página con un lector de pantalla.

¡Esto es para personas que quieren hacer su Xpequeño / grande y rojo!

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

Puede usar texto que solo sea accesible para los lectores de pantalla colocándolo en un espacio que oculte de manera accesible. Coloque la x en el CSS que los lectores de pantalla no puedan leer, por lo que no confundirá, pero es visible en la página y también accesible para los usuarios del teclado.

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

Usando navegadores modernos puede rotar un signo +:

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

luego simplemente coloque el siguiente html donde lo necesite:

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

×es mejor que ✖como se ✖comporta de manera extraña en Edge e Internet Explorer (probado en IE11). No tiene el color correcto y es reemplazado por un "emoji"