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

Je comprends que les polices d'icônes ne sont que des polices et que vous pouvez obtenir les icônes en appelant simplement leur nom de classe, mais comment fonctionnent les polices d'icônes?

J'ai essayé de vérifier les ressources de polices d'icônes associées 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 été en mesure de comprendre comment cela se produit.

J'ai également été incapable de trouver des ressources sur la façon dont cette "technique de police d'icônes" est réalisée, même s'il existe des tas de polices d'icônes disponibles . Il existe également de nombreuses ressources montrant comment les polices d'icônes peuvent être intégrées , mais personne ne semble partager ou écrire sur la façon dont cela est fait!

Les glyphicons sont des images et non 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és backround-image:

Icônes de police réelles ( FontAwesome , par exemple) n'impliquent le téléchargement d' une police spécifique et faire usage de la propriété, par exemple:content

@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 la contentpropriété n'est pas prise en charge dans les navigateurs plus anciens, ceux- ci utilisent également des images .

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

Si votre question est de savoir comment une classe CSS peut insérer un caractère spécifique (qui sera rendu sous forme d'icône dans la police spéciale), jetez un œil à la source de 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"; }

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

Comment fonctionnent les icônes de polices Web?

Les icônes de polices Web fonctionnent en utilisant CSS pour injecter un glyphe spécifique dans le HTML à l'aide de la propriété content. Il utilise ensuite @font-facepour charger une police Web dingbat qui stylise le glyphe injecté. Le résultat est que ce glyphe injecté devient l'icône souhaitée.

Pour commencer, vous aurez besoin d'un fichier de polices Web avec les icônes dont vous avez besoin, soit définies pour des ASCIIcaractères particuliers , (A, B, C, !, @, #, etc.)soit dans la zone d'utilisation privée de la police Unicode, qui sont des espaces dans la police qui ne seront pas utilisés par des caractères spécifiques dans un Police codée Unicode.

En savoir plus, comment créer une icône de police Web sur Responsive Webfont Icons .