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

87

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!

css web fonts icons icon-fonts Vivek Chandra
la source

Réponses:

53

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:

Glyphicons

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

James Donnelly
la source
4
Les icônes FontAwesome sont des polices. J'ai même mentionné FontAwesome dans ma réponse et j'ai expliqué comment ils gèrent les navigateurs qui ne prennent pas en charge leur méthode CSS d'ajout des icônes à la page.
James Donnelly
3
Les icônes sont les caractères de la police. À titre d'exemple grossier: la lettre «Z» pourrait être conçue pour ressembler à une valise, enregistrée en tant que police puis utilisée sur un site Web.
James Donnelly
1
Voici un exemple d'utilisation de FontAwesome complètement brut, qui se transforme en ambulance: jsfiddle.net/GWqcF/2
James Donnelly
6
@VivekChandra oui c'est vrai! :-) Les polices d'icônes sont comme n'importe quelle autre police sauf que les caractères sont stylés pour ressembler à des icônes. FontAwesome utilise une plage de caractères réservée à un "usage privé" .
James Donnelly
1
Impressionnant. Merci pour toutes les ressources - je vais l'examiner, les choses sont plus claires maintenant.
Vivek Chandra
23

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).

Thilo
la source
2
Que signifie le slash f?
CodyBugstein
5
Le fn'en fait pas partie, c'est juste le nombre hexadécimal 15. La barre oblique inverse démarre la séquence d'échappement pour un point de code hexadécimal. \f004en CSS, c'est comme en HTML.
Thilo
11

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 .

artamonovdev
la source