I. Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, CSS buttons with icons but no images.

II. Introduction

En tant que développeur Web, nous sommes rarement à l'aise avec les images et si nous pouvons éviter de les utiliser nous le faisons.
C'est pourquoi nous allons nous intéresser aujourd'hui à la création de boutons avec des icônes sans utiliser d'images pour générer ces icônes. Pour cela, nous allons voir qu'il est possible d'utiliser le CSS.

III. Créer le bouton

En premier lieu, nous devons le créer.
Pour cela, nous allons utiliser un simple bouton rectangulaire CSS3 avec des bords arrondis.

Copiez le code CSS suivant pour le créer :

 
Sélectionnez
.buttons
{
display: inline-block;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
border: 1px solid #a1a1a1;
padding: 0 2em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
}

IV. Ajouter le sélecteur :before

Maintenant que nous avons créé notre bouton, nous devons ajouter le sélecteur :before qui va nous permettre par la suite d'ajouter du contenu à nos boutons.

Tout ce que nous avons besoin de faire est d'ajouter un padding et un margin pour positionner le sélecteur :before au bon endroit.

Copiez le code CSS suivant pour positionner votre sélecteur :

 
Sélectionnez
.buttons:before
{
float: left;
width: 1em;
text-align: center;
font-size: 1.7em;
margin: 0 0.5em 0 -1em;
padding: 0 .2em;
pointer-events: none;
}

Maintenant afin de mettre une icône en utilisant le CSS nous avons besoin d'ajouter la propriété CSS de contenu content.

Une fois que nous avons du contenu dans le sélecteur :before nous pouvons créer de nouvelles classes CSS pour les différents contenus que nous voulons utiliser.

Vous trouverez ci-dessous une liste non exhaustive des icônes qu'il est possible d'utiliser pour vos boutons CSS.

V. Boutons de formulaire

Image non disponible

Ci-dessous les boutons que vous pouvez utiliser pour vos formulaires.

 
Sélectionnez
/*Formulaires*/
.add:before    { content: "\271A"; }
.edit:before   { content: "\270E"; }
.delete:before { content: "\2718";}
.save:before   { content: "\2714";}
.email:before  { content: "\2709";}
.cross:before  { content: "\2716"; }

VI. Boutons monétaires

Image non disponible

Si vous voulez afficher des informations monétaires dans vos boutons.

 
Sélectionnez
/*Monnaie*/
.dollar:before { content:"\0024"; }
.euro:before   { content:"\20AC"; }
.pound:before  { content: "\00A3"; }
.cent:before   { content: "\20B5"; }

VII. Boutons de température

Image non disponible

Affichez les symboles de température Celsius et Fahrenheit.

 
Sélectionnez
/*Temperature*/
.celsius:before    { content: "\2103"; }
.fahrenheit:before { content: "\2109"; }

VIII. Boutons avec symboles mathématiques

Image non disponible

Il existe énormément de symboles mathématiques, ci-dessous une liste non exhaustive de ceux qui peuvent être utiles.

 
Sélectionnez
/*Math*/
.pi:before            { content: "\213C"; }
.one_thrid:before     { content: "\2153"; }
.two_thrid:before     { content: "\2154"; }
.one_fifth:before     { content: "\2155"; }
.two_fifth:before     { content: "\2156"; }
.three_fifth:before   { content: "\2157"; }
.four_fifth:before    { content: "\2158"; }
.one_sixth:before     { content: "\2159"; }
.five_sixth:before    { content: "\215A"; }
.one_eighth:before    { content: "\215B"; }
.three_eighth:before  { content: "\215C"; }
.five_eighth:before   { content: "\215D"; }
.seven_eighth:before  { content: "\215E"; }
.quarter:before       { content: "\00BC"; }
.half:before          { content: "\00BD"; }
.three_quarter:before { content: "\00BE"; }

IX. Boutons avec flèches

Image non disponible

Vous pouvez afficher différents types de flèche.

 
Sélectionnez
/*Fleches*/
.next:before             { content: "\279C"; }
.left_arrow:before       { content: "\2190"; }
.up_arrow:before         { content: "\2191"; }
.right_arrow:before      { content: "\2192"; }
.down_arrow:before       { content: "\2193"; }
.up_left_arrow:before    { content: "\2196"; }
.up_right_arrow:before   { content: "\2197"; }
.down_left_arrow:before  { content: "\2199"; }
.down_right_arrow:before { content: "\2198"; }

X. Autres boutons

Image non disponible

Il y a plein d'autres icônes utilisables, ci-dessous quelques-unes des plus utiles.

 
Sélectionnez
/*Symboles*/
.like:before               { content: "\2764"; }
.star:before               { content: "\2605"; }
.spark:before              { content: "\2737"; }
.play:before               { content: "\25B6"; }
.watch:before              { content: "\231A"; }
.blacksun:before           { content: "\2600"; }
.cloud:before              { content: "\2601"; }
.umbrella:before           { content: "\2602"; }
.snowman:before            { content: "\2603"; }
.blackstar:before          { content: "\2605"; }
.whitestar:before          { content: "\2606"; }
.blackphone:before         { content: "\260E"; }
.whitephone:before         { content: "\260F"; }
.saltire:before            { content: "\2613"; }
.hot_drink:before          { content: "\2615"; }
.skull:before              { content: "\2620"; }
.radioactive:before        { content: "\2622"; }
.biohazard:before          { content: "\2623"; }
.peace:before              { content: "\262E"; }
.yingyang:before           { content: "\262F"; }
.frowning_face:before      { content: "\2639"; }
.smiling_face:before       { content: "\263A"; }
.first_quarter_moon:before { content: "\263D"; }
.last_quarter_moon:before  { content: "\263E"; }
.wheelchair:before         { content: "\267F"; }
.recycle:before            { content: "\267D"; }
.recycle2:before           { content: "\267C"; }
.music_note:before         { content: "\266C"; }
.warning:before            { content: "\26A0"; }
.male_and_female:before    { content: "\26A4"; }
.scissors:before           { content: "\2701"; }
.airplane:before           { content: "\2708"; }
.snow:before               { content: "\2042"; }

XI. Conclusion

Nous avons vu dans ce tutoriel comment créer simplement des boutons avec icônes sans avoir à recourir à l'insertion d'images. Vous pouvez vous amuser à chercher d'autres codes correspondants à d'autres icônes !

XII. Liens

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.
Ci-dessous une liste non exhaustive de sites où vous pourrez trouver les codes hexadécimaux des icônes :

XIII. Remerciements

Je tiens à remercier Paul Underwood pour m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.