Polices d'icônes : avantages et inconvénients de la police Awesome

Les polices d'icônes sont utilisées pour inclure certaines icônes standard dans le contenu de votre site Web. Les Police 'Super' est un bon exemple qui offre de nombreux avantages par rapport aux autres polices d'icônes. Nous suggérons également d'utiliser Polices d'icônes de Freepik comme une bonne alternative.

Font Awesome a été conçu à l'origine par David Gandi Pour une utilisation avec Twitter Bootstrap. Font Awesome peut être utilisé avec WordPress en utilisant le Plugin Font Awesome Icons conçu par Rachel Boulanger.

Voici une brève introduction à ces polices et où la police Awesome s'intègre dans un style qui n'en est peut-être qu'à ses balbutiements.

Pourquoi utiliser des polices d'icônes

Lorsque vous concevez un site Web, les images occupent beaucoup d'espace Web en raison de la taille de leurs fichiers. Ils doivent également être appelés sur vos pages Web à l'aide du balisage HTML. Non seulement cela, mais leur mise à l'échelle est souvent un problème, perdant leur définition à mesure qu'ils augmentent en taille. Une image normale ne se résout comme prévu que lorsqu'elle est utilisée dans ses dimensions conçues à l'origine.

Lorsque vous recherchez des images d'icônes standard, telles que des véhicules, certains caractères de ponctuation ou des icônes de graphique, les polices d'icônes peuvent vous offrir des images évolutives qui ont la même apparence quelle que soit la taille de la police. C'est tout comme les lettres et les chiffres apparaissent de la même manière, que vous utilisiez une taille de police 2 ou 5 ou une taille de police de 10 ou 24 points.

Dans de nombreux cas, les gens n'utilisent tout simplement pas les images à cause de ce problème, et leur article ou rapport en ligne en souffre en termes de détails ou de clarté. En utilisant Font Awesome, ils peuvent ajouter des icônes de base à leurs sites et les mettre à l'échelle à la taille requise, uniquement limités par les dimensions de leurs documents - et ils le peuvent sans perdre la définition. Vous pouvez considérer les icônes évolutives de la même manière que les caractères de police évolutifs.

Voici une sélection du lecteur vidéo et des icônes sociales disponibles :

Et aussi les nouvelles icônes qui accompagnent la version 3.0 :

Chacun d'eux peut être agrandi sans perte de définition. Vous pouvez changer leur couleur et ajouter facilement des ombres et changer leur transparence. En fait, vous pouvez faire avec eux tout ce que vous pouvez faire avec des images, et même plus, sans les inconvénients de la taille du fichier.

C'est essentiellement ce que les polices d'icônes peuvent faire, et la police Awesome en particulier. Voici quelques informations sur la façon de les utiliser et d'en tirer le meilleur parti, ainsi qu'un ou deux inconvénients liés aux fronts d'icônes :

Utilisation de Font Awesome

Avec le CSS d'amorçage normal :

Font Awesome peut être utilisé avec le CSS Bootstrap par défaut en copiant le répertoire de polices Awesome dans votre projet, puis en copiant font-awesome.min.css dans le projet. Vous devez ensuite ouvrir font-awesome.min.css et modifier les chemins de police pour vous assurer qu'ils pointent vers l'emplacement Awesome.

Dans la section Head de votre code HTML, l'emplacement de font-awesome.min.css doit être référencé ainsi :

Le chemin de la police étant relatif à partir de votre répertoire CSS.

Avec Bootstrap Moins :

Si vous utilisez Twitter Bootstrap avec LESS CSS, copiez d'abord le répertoire de polices Font Awesome dans votre projet et font-awesome-less dans votre répertoire Bootstrap Less. Puis:

• a) Ouvrez bootstrap.less et remplacez @import « sprites.less » ; avec @import "font-awesome.less" ;
• b) Ouvrez le fichier font-awesome.less de votre projet et modifiez la variable @FontAwesomePath pour qu'elle pointe vers votre répertoire de polices.

@FontAwesomePath : "../font" ;

Le chemin de la police étant relatif à votre répertoire CSS compilé.

Vous êtes alors prêt – bien que si vous utilisez un compilateur statique, vous devriez recompiler MOINS.

Ne pas utiliser Bootstrap :

Si vous n'utilisez pas Bootstrap, après avoir copié le fichier de polices dans le répertoire de votre projet, vous pouvez copier l'un des deux fichiers font-super dans votre projet, ouvrez-le, puis modifiez l'emplacement de la police pour qu'elle pointe vers le répertoire des polices.

Si vous utilisez Internet Explorer 7, utilisez font-awesome-ie7.min.css

Comment utiliser Font Awesome dans WordPress

Il existe deux façons simples d'utiliser les polices d'icônes dans WordPress. Vous avez téléchargé le plugin *. Vous pouvez les intégrer à l'aide de HTML ou utiliser un shortcode. Voici des exemples de chacun :

Utilisation de HTML : Là où vous voulez que la police apparaisse, ajoutez simplement le nom de l'élément au nom de la classe ainsi : [html] [/html]
ajoutera un cercle noir.

Vous pouvez modifier la taille du cercle ainsi :

Vous trouverez probablement plus facile d'ajouter la taille de la police à votre feuille de style CSS si vous avez l'intention d'utiliser fréquemment la même taille d'icône et le format ci-dessus pour les exceptions.

Utilisation du code court : Le shortcode est plus facile, mais ne fonctionnera généralement que pour le contenu de la publication et de la page dans l'écran de l'éditeur de publication. Le format est [icon name=icon-circle] où vous voulez le cercle.

L'inconvénient des polices d'icônes

Les polices d'icônes semblent idéales à utiliser lorsque vous avez besoin d'ajouter une icône spécifique à votre blog ou à votre site Web, et elles peuvent être liées pour exécuter des fonctions spécifiques. Cependant, tout n'est pas parfait et les polices d'icônes présentent également des inconvénients. Ce sont les problèmes courants qui sont signalés par les utilisateurs de polices d'icônes qui ne s'appliquent pas à Font Awesome – c'est pourquoi il est si « génial !

1. L'un est le problème potentiel avec les lecteurs d'écran qui pourraient lire à haute voix l'icône sous la forme d'une lettre alphabétique. Ce n'est pas un problème avec Font Awesome en raison de la façon dont les caractères de la police sont récupérés.
2. Ils peuvent être présentés dans une seule couleur - ou dans un dégradé de couleurs à l'aide de dégradés CSS3. Est-ce un vrai problème avec les polices d'icônes ?
3. La création d'une police personnalisée adaptée à vos besoins peut prendre du temps. Cependant, il existe déjà un grand choix de polices géniales proposées par Font Awesome, et la liste est continuellement élargie. Bien qu'il s'agisse d'une police source fermée gratuite, des polices approuvées conçues par les utilisateurs sont ajoutées régulièrement.

Résumé du générateur de polices géniales

Le générateur Font Awesome est l'une des meilleures polices d'icônes gratuites actuellement disponibles. Bien qu'il ait été conçu pour être utilisé avec Twitter Bootstrap, il peut être adapté pour une utilisation sur des sites Web réguliers et il existe également un plugin WordPress disponible qui offre le meilleur de cette police d'icônes. Si vous utilisez des polices d'icônes, essayez Font Awesome, car vous pourriez être agréablement surpris une fois que vous l'aurez maîtrisé.

* Le plugin WordPress Font Awesome Icons est disponible sur https://github.com/rachelbaker/