web-dev-qa-db-fra.com

Icon Fonts: comment fonctionnent-ils?

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 les polices d'icônes fonctionnent-elles?

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 échoué dans la recherche de ressources sur la façon dont cette "technique de police d'icônes" est réalisée, même s'il existe des charges de polices d'icônes disponibles . Il existe également des charges de ressources montrant comment les polices d'icônes peuvent être intégrées , mais personne ne semble partager ou écrire à propos de comment c'est chose faite!

csswebfontsiconsicon-fonts
75
Vivek Chandra

Glyphicons sont images et pas une police. Toutes les icônes se trouvent dans une image Sprite (également disponible en tant qu'images individuelles) et elles sont ajoutées aux éléments en positionnant backround-images:

Glyphicons

Les icônes de polices réelles ( FontAwesome , par exemple) ne impliquent le téléchargement d’une police spécifique et l’utilisation du paramètre content propriété, 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 la propriété contentnon supportée dans les navigateurs plus anciens, ceux-ci utilisent également images .

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

49
James Donnelly

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), consultez le 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).

19
Thilo

Comment fonctionnent les icônes de police Web?

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

Pour commencer, vous aurez besoin d’un fichier de polices Web contenant les icônes dont vous avez besoin, soit défini pour des caractères particuliers 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.

En savoir plus, comment créer une icône de fonte Web à l'adresse icônes de fonte Web sensibles .

8
artamonovdev