Un guide pour des icônes d'interface utilisateur de meilleure qualité et plus claires avec les polices Web

Si vous connaissez les formats d'image bitmap (tels que PNG et GIF) pour afficher des icônes sur un site Web, vous devez également connaître ses inconvénients. Tout d’abord, en fonction de la dimension et du nombre d’informations sur la couleur de l’icône, une taille de fichier d’icône peut être très grande..

Si nous avons trop d'icônes pour créer un site Web, cela risque également de ralentir les performances du site Web, car le navigateur doit exécuter de nombreuses requêtes HTTP. Bien que ce problème puisse être résolu avec un sprite CSS, la taille du fichier est toujours importante..

L'icône bitmap présente également des lacunes en termes de flexibilité et d'évolutivité. Supposons que nous devions agrandir ou agrandir l’icône à un certain niveau, ou l’afficher à travers une très haute résolution d’écran, comme sur l’affichage de la rétine; l'icône sera certainement se révéler flou.

Eh bien, si vous prenez en compte certaines des questions ci-dessus, vous devrez probablement utiliser des polices de caractères.

Utilisation des polices d'icônes

Un police de l'icône est un ensemble d’icônes regroupées dans une police Web qui peut ensuite être intégrée à un site Web à l’aide de @ font-face. Comme l'a souligné Chris de CSS-Astuce, l'utilisation de la police de caractères sur l'image pour générer des icônes présente de nombreux avantages.

La police est un objet vectoriel qui, de par sa nature, est indépendante de la résolution. Ainsi, l'icône restera nette dans diverses résolutions d'écran, y compris de très hautes résolutions d'écran (comme au niveau de la rétine)..
Il est également évolutif, ce qui lui permet d’être agrandi à plusieurs niveaux sans perdre en qualité et en précision..
Puisque l'icône est fondamentalement une police, nous pouvons également contrôler la couleur, la transparence, l'ombre du texte et même la redimensionner à travers la feuille de style
Nous pouvons également animer l'icône avec CSS3.
L'icône est appelée avec le @ font-face règle prise en charge dès Internet Explorer 4 (avec .eot).
Requête HTTP inférieure et taille de fichier inférieure.

Voici quelques-unes des meilleures polices d'icônes gratuites que nous pouvons trouver:

Police génial
IcoMoon
Icônes de médias sociaux
Zurb Foundation Icons

Assurez-vous que vous avez vérifié et suivi la licence avant de l'intégrer dans votre site Web pour respecter le temps et le travail acharné de l'auteur..

Règle @ font-face

Comme nous l'avons mentionné, les icônes sont intégrées à l'aide de @ font-face règle à travers la feuille de style qui définissent nouvelle famille de polices. Dans l'exemple suivant, nous allons utiliser les symboles Web.

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); src: url (format 'fontes / websymbols-regular-webfont.eot? #iefix') ('type-incorporé'), url (format 'fonts / websymbols-regular-webfont.woff') ('woff'), ("polices / websymbols-regular-webfont.ttf") format ("type réel"), url ("polices / websymbols-regular-webfont.svg # WebSymbolsRegular") (format "svg");

Ensuite, dans le document HTML, il suffit d’ajouter les caractères représentant l’icône et d’appliquer le nouveau famille de polices De manière générale dans le document, nous pouvons faire plus spécifiquement en ajoutant une classe supplémentaire à certains éléments dans lesquels l'icône doit être rendue, par exemple;

  h
 je
 j
 UNE
 je

Retour à la feuille de style, nous définissons le nouveau famille de polices pour cette classe que nous venons d'ajouter:

 .icon-font font-family: WebSymbolsRegular; taille de police: 12 pt;

Demo @ font-face

Utilisation de pseudo-éléments

Si l’icône est considérée comme l’élément latéral, nous pouvons également livrer l’icône par pseudo-élément. En supposant que notre balise HTML soit la suivante:

  Répondre
 Répondre à tous
 Vers l'avant
 Attachement
 Image

Nous pouvons le faire de cette façon dans la feuille de style:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; marge droite: 5px;  ul.icon-font.pseudo li: nth-child (1): before content: "h";  ul.icon-font.pseudo li: nth-child (2): before content: "i";  ul.icon-font.pseudo li: nth-child (3): before content: "j";  ul.icon-font.pseudo li: nth-child (4): before content: "A";  ul.icon-font.pseudo li: nth-child (5): before content: "I";

Pseudo-élément de démonstration

Utilisation privée Unicode

Dans certaines circonstances, les icônes ne sont pas incorporées dans des lettres (A, B, C, D, etc.), mais dans un usage privé Unicode afin de minimiser les conflits entre les caractères. Comme dans FontAwesome, l'auteur a heureusement ajouté tout le code des caractères dans la feuille de style, qui ressemble à ceci;

 .icon-glass: before content: "\ f0c6";

Mais lorsque nous devons intégrer l’icône directement dans le code HTML, quelque chose comme le code suivant \ f0c6 ne rendra pas l'icône pointée, car ce n'est pas un caractère valide encodé en HTML.

HTML a besoin d'un balisage numérique de référence rendre les caractères spéciaux. Nous en avons parlé un peu dans notre précédent tutoriel sur les boutons CSS3; ce caractère est préfixé par la combinaison d’un signe esperluette (Et), un signe dièse (#) Et un X suivi du nombre hexadécimal qui représente le caractère.

Par exemple, le f0c6 est un nombre hexadécimal, donc la référence de caractère numérique en HTML sera & # xf0c6;, dans FontAwesome, ce code affichera le icône de trombone, ainsi;

Démo Unicode

Sous-police

Les icônes de la collection peuvent ne pas être toutes nécessaires. Dans ce cas, nous pouvons supprimer les caractères inutilisés en sous-paramétrant la police qui sera également utilisée. réduire la taille des fichiers de polices. Heureusement, il existe un outil pratique de FontSquirrel pour faire ce travail facilement, @ font-face generator.

Après avoir accédé à cette page et ajouté la police, sélectionnez Expert. Vous verrez plus d'options. sélectionner Souscription personnalisée.

Dans cet exemple, nous utilisons la police Sociolico pour afficher les icônes de médias sociaux sur notre site Web, mais les icônes dont nous aurons besoin sont uniquement Dribble, Facebook et Twitter, qui sont respectivement représentées par ces caractères. d, f et t. Placez donc ces caractères dans le champ de saisie Caractères uniques comme suit:

Et nous avons fini. Maintenant, nous pouvons télécharger la police et dans mon cas, la taille de la police s’est avérée être de seulement 3 Ko à 5 Ko. Rappelez-vous également que les seuls personnages qui sera rendu dans une icône ne sont que d, f et t, tandis que les autres caractères ne seront que des lettres ordinaires.

Pensée finale

Une chose que nous ne pouvons pas faire avec cette pratique est d’ajouter des effets très détaillés comme celui-ci à l’icône.

Toutefois, si notre conception globale ne nécessite pas de détails à ce niveau, cette approche pourrait constituer un meilleur moyen de diffuser les icônes dans les sites Web. Il a la flexibilité, l'évolutivité, est prêt pour la rétine avec une très petite taille de fichier, que pouvons-nous demander de plus?

Enfin, si vous souhaitez approfondir ce sujet, nous avons rassemblé ci-dessous quelques références utiles, ainsi que notre code de démonstration et le code source à télécharger..

Comment faire votre propre icône Webfont - WebDesignerDepot.com
Affichage des polices et des attributs de données - 24Ways
Usage Privé Unicode - Wikipedia

Démo
Source de téléchargement