Utiliser une font iconographique avec @font-face

de , le , 1 5 4 3674 vues

Installer une police iconographique avec @font-face


Une police iconographique est une police comme les autres sauf qu'à la place des caractères latin on retrouve différents icônes. Elle va nous permettre d'injecter des icônes sans avoir besoin d'utiliser des images. En plus comme ces polices sont vectorisées, elles permettent d'être redimensionnées comme l'on redimensionnerait un texte.
Pour le tutoriel on va utiliser Entypo. Cette police est sous creative commons, elle est donc utilisable pour un usage privé et commercial.
Voir les spécifités de la licence de Entypo.
Dans votre style CSS définissez votre police :
@font-face {
    font-family: 'EntypoRegular';
    src: url('entypo-webfont.eot');
    src: url('entypo-webfont.eot?#iefix') format('embedded-opentype'),
         url('entypo-webfont.woff') format('woff'),
         url('entypo-webfont.ttf') format('truetype'),
         url('entypo-webfont.svg#EntypoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
Pour être supporté par tous les navigateurs vous devez importer tous ces différents formats.
Ensuite pour utiliser votre police il suffit de définir la font-family d'une de vos balise.
<style>p{font-family:'EntypoRegular';}</style>
<p>d</p> //"d" deviendra l'icône associé à la lettre "d" c-a-d un icône de rafraîchissement.
Mais le meilleur usage reste de l'associer aux pseudo-classes :before ou :after. Ainsi vous pouvez insérer un icone vectoriel sans même rajouter de balise.
<style>p:before{content:'d';font-family: 'EntypoRegular';}</style>
<p>rafraîchir</p>

Tutoriels conseillés

outils professeur date intitulé
CSS Comment bien utiliser :before et :after en CSS ?