Je veux créer un bouton de fermeture en utilisant uniquement le CSS.
Je suis sûr que je ne suis pas le premier à faire cela, alors est-ce que quelqu'un sait quelle police a un "x" de la même largeur que la hauteur, de sorte qu'il peut être utilisé sur plusieurs navigateurs pour ressembler à un bouton de fermeture ?
Notez que vous devez utiliser une police qui supporte ce caractère. Je pense que DejaVu est très bien pour cela. Je pense que Lucida Sans Unicode y Arial Unicode MS supportent également ces symboles unicode. Si vous n'utilisez pas une police qui prend en charge ces caractères sur certains navigateurs (notamment l'ancien IE), vous obtiendrez uniquement des rectangles indiquant des symboles non pris en charge. J'utilise une version allégée de DejaVu pour ces symboles.
C'est un excellent personnage pour cet objectif. Savez-vous ce que ce personnage est "censé" être ?
En suivant votre logique, x-times ne devrait représenter que x fois. Je dirais qu'il faut utiliser soit une image, soit le mot close.
"x" (lettre) ne doit pas être utilisé pour représenter autre chose que la lettre X. - Qui a dit ça ? Si c'est juste vous, quelle est la logique derrière tout ça ?
× × o × (même chose) U+00D7 signe de multiplication
× même caractère avec un fort poids de police
⨯ U+2A2F Produit de Gibbs
✖ U+2716 signe de multiplication lourd
Il y a aussi un emoji ❌ si vous le supportez. Si vous ne le faites pas, vous venez de voir un carré = ❌
J'ai aussi 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 que par 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>
Comme @Haza l'a souligné, le symbole des temps peut être utilisé. Twitter Bootstrap le fait correspondre à un icône de fermeture pour le rejet de contenus tels que les modales et les alertes.
<button class="close">×</button>
Je préfère Font Awesome : http://fortawesome.github.io/Font-Awesome/icons/
L'icône que vous recherchez est fa-times . L'utilisation est aussi simple que cela :
<button><i class="fa fa-times"></i> Close</button>
@mevius Pas sûr de ce que vous essayez de dire ? Font Awesome ne nécessite pas de javascript et ils son les polices de caractères. Le PO demande "quelle police...".
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
