La police de caractères pour CSS “x” bouton fermer?

Je veux créer un bouton de fermeture à l'aide de CSS.

Je suis sûr que je ne suis pas le premier à le faire, donc, personne ne sait à qui la police a un "x", de la même largeur que de hauteur, de sorte qu'il peut être utilisé de la croix-navigateur pour ressembler à un bouton de fermeture?

InformationsquelleAutor Leonti | 2011-03-18
  1. 497

    ✖ fonctionne vraiment bien. Le code HTML est ✖.

    • Notez que vous devez utiliser une police qui prend en charge ce personnage. Je pense que DejaVu a l'air sympa pour ça. Je pense que Lucida Sans Unicode et Arial Unicode MS aussi appuyer de tels symboles unicode. Si vous n'utilisez pas une police qui prend en charge ces caractères sur certains navigateurs (surtout les vieux IE) tout ce que vous obtiendrez sont des rectangles indiquant non pris en charge symboles. J'utilise une version allégée de DejaVu pour de tels symboles.
    • Elle montre un rectangle vertical pour moi.
    • Voir le commentaire ci-dessus par panzi.
    • C'est un excellent personnage pour le but. Savez-vous ce que ce personnage est en fait "censé" être?
    • Il est appelé "Lourd Multiplication X' - je crois - fileformat.info/info/unicode/char/2716/index.htm
    • 2 ans plus tard, ce commentaire fait juste mon projet coup de pied supplémentaire d'un montant de cul que je cherchais!
    • Maintenant, si seulement on pouvait changer la couleur dans FireFox 32.0, il est toujours rouge, même lors du réglage de la couleur css
    • Quatre ans plus tard, en faisant Java Swing de développement et cela fonctionne très bien sur un JButton! Utilisation: JButton bouton = new JButton("<html>&#10006;</html>");
    • J'ai trouvé quelque chose de pas si étonnant à propos de ce symbole. Vous ne pouvez pas contrôler sa couleur. C'est toujours noir. J'ai essayé une classe avec la couleur:#fff, un style avec la couleur:#fff, et même essayé d'appliquer une durée de wrapper. Nada. Toujours en noir.
    • sa couleur est le CSS color valeur de l'élément qui l'entoure (ou un parent)
    • L'autre (plus attrayant OMI), l'option est &#x2715;
    • c'est la meilleure et la plus simple de répondre! Pas de pas de css bootstrap juste un paquebot! BRAVO!
    • Malheureusement, vous ne pouvez pas colorisé &#10006; avec css (par exemple, couleur: blanc), mais avec des &fois; vous pouvez le faire.

    InformationsquelleAutor eipark
  2. 75

    Que sur l'utilisation de l' ×-marque (le symbole de multiplication), &times; en HTML, pour qui?

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

    • Avec votre logique aussi x-fois devrait représenter que x fois. Je dirais soit utiliser une image ou le mot de proximité.
    • Ouais, c'est vrai aussi, je le sais.
    • "x" (lettre) ne doit pas être utilisé pour représenter autre chose que la lettre X. - qui dit cela? si c'est juste vous ce qui est la logique derrière cela. merci
    • Vous pouvez également utiliser la multiplication caractère ' × '. Prises à partir de cette question.
    • Meilleure réponse à mon humble avis. Je pense que tous les navigateurs en charge ce et si le Bootstrap est de l'utiliser... ils ont l'habitude de suivre les meilleures pratiques.
    • J'adore! Plus facile à mémoriser que les &#10006;
    • Oui, la lettre x doit certainement ne pas être utilisé pour représenter la multiplication ou d'un bouton de fermeture, parce que c'est un personnage différent. Il est souvent fait par des gens qui sont trop paresseux, pressés, ou qui ne se soucient pas de la qualité. Tout comme les gens utilisent parfois un bas-de-casse b pour représenter une comédie musicale plat, symbole, mais ce n'est pas une bonne idée de suivre leur exemple.
    • En outre, il pourrait embrouiller les gens avec des lecteurs d'écran.

    InformationsquelleAutor Haza
  3. 60

    × &#215; ou &times; (même chose) U+00D7 signe de multiplication

    × même personnage avec une forte épaisseur de police

    ⨯ &#10799; U+2A2F Gibbs produit

    ✖ &#10006; U+2716 lourd signe de multiplication

    Il y a aussi un emoji ❌ si vous le soutenir. Si vous n'en avez-vous pas vu un carré = &#10060;

    J'ai aussi fait cet exemple de code simple sur Codepen quand je travaille avec un graphiste qui m'a demandé de lui montrer de quoi il pourrait ressembler, quand j'ai demandé si je pouvais remplacer votre bouton de fermeture avec une version codée plutôt que d'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>
    InformationsquelleAutor davidcondrey
  4. 36

    HTML

    ✕ &#x2715; ✓ &#x2713;

    ✖ &#x2716; ✔ &#x2714;

    ✗ &#x2717;

    ✘ &#x2718;

    × &#x00d7; &times;

    CSS

    Si vous souhaitez utiliser les caractères ci-dessus à partir de CSS (comme je l'ai.e: dans un :before ou :after pseudo), il suffit d'utiliser l'échappé \ Unicode HEXADÉCIMAL de la valeur, comme par exemple:

    CSS:

    [class^="ico-"], [class*=" ico-"]{
  font: normal 1em/1 Arial, sans-serif;
  display: inline-block;
}


.ico-times:before{ content: "16"; }
.ico-check:before{ content: "14"; }

    HTML:

    <i class="ico-times"></i>
<i class="ico-check"></i>

    Utiliser des exemples pour les différents langues:

    • &#x2715; HTML
    • '\2715' CSS comme je l'ai.e: .clear:before { content: '\2715'; }
    • '\u2715' JavaScript chaîne
    InformationsquelleAutor Roko C. Buljan
  5. 21

    ✕ est un autre grand un qui n'est pas trop épais. Le code HTML est &#10005;, ou 2715 dans l'hex.

    InformationsquelleAutor emlai
  6. 19

    Comme @Haza a souligné la fois symbole peut être utilisé. Twitter Bootstrap cartes à un icône de fermeture pour rejeter le contenu comme les modaux et les alertes.

    <button class="close">&times;</button>
    • Instructif, en soulignant que Bootstrap utilise, mais c'est un doublon de réponse, c'est la même chose que @Haza 's.
    InformationsquelleAutor John Lehmann
  7. 6

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

    L'icône, vous pouvez être à la recherche pour est fa-times. C'est aussi simple que cela à utiliser:

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

    Violon ici

    • Ce n'est pas un CSS solution.
    • Pas sûr de ce que vous essayez de dire? Police Impressionnant ne nécessite pas de javascript, et de polices. L'OP demande "de la police...".
    InformationsquelleAutor prograhammer
  8. 5

    C'est probablement pédantisme, mais jusqu'à présent, personne n'a vraiment donné une solution "pour créer un bouton de fermeture à l'aide de CSS." seulement. Ici, vous allez:

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

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

    InformationsquelleAutor Steve Bennett
  9. 5

    il y a un autre n'est pas mentionné ici - nice mince si vous avez besoin de ce genre de look pour votre projet: ╳

    &#x2573; or decimal: &#9587;
    InformationsquelleAutor Picard
  10. 4

    &times; et font-family: Garamond, "Apple Garamond"; faire assez bon. Police Garamond est mince et sécurité web

    La police de caractères pour CSS “x” bouton fermer?

    InformationsquelleAutor Iggy
  11. 3

    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>
    InformationsquelleAutor lubar
  12. 2

    Oublier une police et d'utiliser 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.

    InformationsquelleAutor Richard JP Le Guen
  13. 2

    C'est pour les gens qui veulent faire de leur X petit/grand et en 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;
}
    InformationsquelleAutor JMASTER B
  14. 1

    Vous pouvez utiliser le texte qui est uniquement accessible aux lecteurs d'écran en le plaçant dans une durée qui de vous cacher dans une manière accessible. Placez le x dans le CSS qui ne peuvent pas être lus par les lecteurs d'écran, donc de ne pas confondre, 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:'
    <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>
    d7'    ; color:red; font-size:2em;}
</style>

<button class="close"><span class="hidden">close</span></button>
    InformationsquelleAutor judyofthewoods
  15. 1

    À l'aide 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);
}

    ensuite il suffit de placer le code html suivant où vous en avez besoin:

     <span class='popupClose'></span>
    InformationsquelleAutor user1432181
  16. 1

    &times; est mieux que &#10006; comme &#10006; se comporte étrangement à Bord et Internet explorer (testé dans IE11). Il n'est pas obtenir la bonne couleur et est remplacé par un "emoji"

    InformationsquelleAutor Raphael Pinel