web-dev-qa-db-fra.com

Quelle police pour CSS "x" bouton de fermeture?

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 est-ce que quelqu'un sait quelle police a un "x" de la même largeur que la hauteur, de sorte qu'elle puisse être utilisée dans plusieurs navigateurs pour ressembler à un bouton de fermeture?

cssfontsfont-face
204
Leonti

✖ fonctionne vraiment bien. Le code HTML est ✖.

486
eipark

Qu'en est-il de l'utilisation de ×-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.

72
Haza

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

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

⨯ ⨯ U + 2A2F Produit Gibbs

✖ ✖ U + 2716 signe de multiplication lourd

Il y a aussi un emoji si vous le soutenez. Sinon vous venez de voir un carré = ❌

J'ai également fait cet exemple de code simple sur Codepen lorsque je travaillais avec un concepteur qui me demandait de lui montrer à quoi ça ressemblait quand je lui demandais si je pouvais remplacer votre bouton de fermeture par une version codée plutôt que 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>
58
davidcondrey

HTML

&#x2715; ✓ &#x2713;
✖ &#x2716; ✔ &#x2714;

✗ &#x2717;
✘ &#x2718;

× &#x00d7;&times;

CSS

Si vous voulez utiliser les caractères CSS ci-dessus (comme i.e: dans un pseudo :before ou :after), utilisez simplement la valeur échappée \ Unicode, 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 :

  • &#x2715;HTML
  • '\2715'CSS comme i.e: .clear:before { content: '\2715'; }
  • '\u2715'JavaScript chaîne
34
Roko C. Buljan

Est un autre excellent qui n'est pas trop épais. Le code HTML est &#10005; ou 2715 au format hexadécimal.

21
emlai

Comme l'a souligné @Haza, le symbole de l'heure peut être utilisé. Twitter Bootstrap mappe cela à un icône proche pour rejeter du contenu tel que des modaux et des alertes.

<button class="close">&times;</button>
19
John Lehmann

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 d'utiliser:

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

violon ici

6
prograhammer

il y en a un autre qui n'est pas mentionné ici - Nice thin - si vous avez besoin de ce genre de look pour votre projet:

&#x2573; or decimal: &#9587;
5
Picard

C’est probablement du pédantisme, mais jusqu’à présent, personne n’a vraiment proposé de solution "créer un bouton de fermeture en utilisant uniquement du CSS". seulement. Voici:

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

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

5
Steve Bennett

&times; et font-family: Garamond, "Apple Garamond"; le rendent assez bon. La police Garamond est mince et sécurisée pour le Web

proper close X

4
Iggy

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

Ceci est pour les personnes qui veulent faire leur X petit/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;
}
2
JMASTER B

Oubliez une police et utilisez une image de fond!

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

2
Richard JP Le Guen

En utilisant les 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 où vous avez besoin:

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

Vous pouvez utiliser un texte uniquement accessible aux lecteurs d'écran en le plaçant dans une plage que vous cachez de manière accessible. Placez le x dans le code CSS qui ne peut pas être lu par les lecteurs d’écran, donc ne sera pas déroutant, mais sera visible sur la page et accessible aux 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>
1
judyofthewoods

&times; est meilleur que &#10006; car &#10006; se comporte étrangement dans Edge et Internet Explorer (testé dans IE11). Il n'obtient pas la bonne couleur et est remplacé par un "emoji"

0
Raphael Pinel