Caractère Unicode pour «X» annuler / fermer?

Je veux créer un bouton de fermeture en utilisant uniquement CSS.

Je suis sûr que je ne suis pas le premier à le faire, alors quelqu'un sait-il quelle police a un «x» de la même largeur que la hauteur, de sorte qu'elle peut être utilisée dans plusieurs navigateurs pour ressembler à un bouton de fermeture?

✖ fonctionne vraiment bien. Le code HTML est ✖.

Qu'en est-il de l'utilisation du × -mark (le symbole de multiplication), ×en HTML, pour cela?

"x" (lettre) ne doit pas être utilisé pour représenter autre chose que la lettre X.

× ×ou ×(même chose) signe de multiplication U + 00D7

× même caractère avec un fort poids de police

⨯ ⨯Produit Gibbs U + 2A2F

✖ ✖Signe multiplicateur lourd U + 2716

Il y a aussi un emoji ❌ si vous le supportez. Si vous ne le faites pas, vous venez de voir un carré =❌

J'ai également fait cet exemple de code simple sur Codepen lorsque je travaillais avec un designer qui m'a demandé de lui montrer à quoi cela ressemblerait lorsque je lui ai demandé si je pouvais remplacer votre bouton de fermeture par une version codée plutôt qu'une image.

<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 vous souhaitez utiliser les caractères ci-dessus à partir de CSS (comme par exemple: dans un :beforeou :afterpseudo), utilisez simplement la \valeur Unicode HEX échappée , comme par exemple:

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

Utilisez des exemples pour différentes langues :

• ✕ HTML
• '\2715' CSS comme ie:.clear:before { content: '\2715'; }
• '\u2715' Chaîne JavaScript

✕ est un autre grand qui n'est pas trop épais. Le code HTML est ✕, ou 2715en hexadécimal.

Comme l'a souligné @Haza, le symbole de l'heure peut être utilisé. Twitter Bootstrap associe cela à une icône de fermeture pour rejeter le contenu comme les modaux et les alertes.

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

Je préfère Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

L'icône que vous recherchez est fa-times. C'est aussi simple que cela à utiliser:

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

Jouez ici

Il s'agit probablement de pédanterie, mais jusqu'à présent, personne n'a vraiment donné de solution "pour créer un bouton de fermeture en utilisant uniquement CSS". seulement. Voici:

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

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

il y en a un autre non mentionné ici - joli mince - si vous avez besoin de ce genre de look pour votre projet: ╳

╳ or decimal: ╳

×et le font-family: Garamond, "Apple Garamond";rendre assez bon. La police Garamond est fine et sécurisée pour le Web

Cela fonctionne bien pour moi:

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

Oubliez une police et utilisez une image d'arrière-plan!

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

Ce sera plus accessible pour les utilisateurs visitant la page avec un lecteur d'écran.

C'est pour les gens qui veulent faire leur Xpetit / grand et rouge!

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

Vous pouvez utiliser du texte accessible uniquement aux lecteurs d'écran en le plaçant dans une plage que vous masquez de manière accessible. Placez le x dans le CSS qui ne peut pas être lu par les lecteurs d'écran, donc ne confondra pas, mais est visible sur la page, et également accessible par les utilisateurs du clavier.

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

En utilisant des navigateurs modernes, vous pouvez faire pivoter un signe +:

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

puis placez simplement le code HTML suivant là où vous en avez besoin:

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

×est mieux que ✖comme ✖se comporte étrangement dans Edge et Internet Explorer (testé dans IE11). Il n'a pas la bonne couleur et est remplacé par un "emoji"