Polices d'icônes : comment fonctionnent-elles ?

Question

Je comprends que les polices d'icônes ne sont que des polices et que l'on peut obtenir les icônes en appelant simplement leur nom de classe, mais comment les polices d'icônes fonctionnent-elles ?

J'ai essayé de vérifier les ressources de polices d'icônes chargées dans Chrome pour voir comment les polices d'icônes affichent les icônes (par rapport aux polices générales), mais je n'ai pas réussi à comprendre comment cela se produit.

Je n'ai pas non plus réussi à trouver des ressources sur la façon dont cette "technique de police d'icônes" est réalisée, bien qu'il y ait beaucoup d'informations sur le sujet. polices d'icônes disponibles . Il existe également de nombreuses ressources montrant comment les polices d'icônes peuvent être utilisées. intégré mais personne ne semble partager ou écrire sur ce sujet. comment C'est fait !

Answer 1

Glyphicons son images y no une police. Toutes les icônes se trouvent dans une image sprite (également disponible sous forme d'images individuelles) et elles sont ajoutées aux éléments comme positionnées backround-image s :

Les icônes de police actuelles ( FontAwesome par exemple) faire impliquent le téléchargement d'une police spécifique et l'utilisation de l'option content par exemple :

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Comme le content propriété n'est pas pris en charge dans les anciens navigateurs, ces également utiliser images .

Voici un exemple de FontAwesome complètement brut, utilisé comme police de caractères, qui devient  ( - vous ne pourrez peut-être pas voir ça !) dans une ambulance : http://jsfiddle.net/GWqcF/2

Answer 2

Si votre question est de savoir comment une classe CSS peut insérer un caractère spécifique (qui sera rendu sous la forme d'une icône dans la police spéciale), jetez un coup d'œil à l'outil source pour FontAwesome :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

Une directive de contenu CSS est donc utilisée pour insérer le caractère (qui provient d'une zone réservée spéciale à usage privé d'Unicode qui ne perturbe pas les autres lecteurs).

Answer 3

Comment fonctionnent les icônes de webfont ?

Les icônes des polices de caractères Web fonctionnent en utilisant le CSS pour injecter un glyphe spécifique dans le HTML à l'aide de la propriété content. Elle utilise ensuite @font-face pour charger une police web dingbat qui donne un style au glyphe injecté. Le résultat est que ce glyphe injecté devient l'icône désirée.

Pour commencer, vous aurez besoin d'un fichier de police de caractères Web contenant les icônes dont vous avez besoin, qu'elles soient définies pour un usage particulier. ASCII caractères (A, B, C, !, @, #, etc.) ou dans la zone d'utilisation privée de la police Unicode, qui sont des espaces de la police qui ne seront pas utilisés par des caractères spécifiques dans une police codée Unicode.

Pour en savoir plus, comment créer l'icône d'une police de caractères Web, rendez-vous sur le site Icônes Webfont Responsive .

Answer 4

Il s'agit littéralement d'une image, normalement un png, qui est téléchargée sur le serveur qui héberge le site de la même manière que toutes vos autres images. Dans certains cas, il s'agit en fait d'une police de caractères que vous téléchargez également sur le serveur et qui, en haut de votre css, est liée à la police de caractères, ce qui permet à n'importe qui sur le site de la voir.