Font Awesome Review – Qu’est-ce que c’est? Est-il bon? Et comment l’utiliser avec WordPress?

Offres WordPress


Si vous cherchez une critique de Font Awesome en une seule phrase, la voici: “C’est sympa … et fonctionnel … et un peu brillant dans sa simplicité.” Cela résume essentiellement ma toute première expérience avec cette boîte à outils plutôt étonnante.

Cette expérience remonte cependant à un certain temps. Pendant un certain temps, j’ai été accroché. Je l’ai utilisé pour un tas de choses et cela a fait ressortir mon contenu, mais, comme c’est souvent le cas, l’excitation initiale a commencé à se dissiper.

Mais gardons cela pour l’instant, et commençons plutôt cette revue Font Awesome – dans laquelle nous couvrirons ce qu’est Font Awesome, si c’est bon ou non, et, peut-être plus important encore, comment l’utiliser avec WordPress – à partir du début.

Qu’est-ce que la police est génial?

Critique de Font Awesome

En un mot, Font Awesome est une police d’icône.

Pensez à une police ordinaire, mais au lieu de lettres, vous obtenez des icônes.

Ceci est la partie vraiment brillante et révolutionnaire de l’ensemble.

Les icônes étaient autrefois une douleur majeure lors de la création d’un site Web. Vous pouvez rarement trouver les bons – surtout si vous avez besoin de plus d’un couple d’entre eux pour être dans le même style. (Dix icônes avec des designs cohérents? Oubliez ça!) Et même si vous les avez trouvées d’une manière ou d’une autre, la qualité n’était pas à la hauteur si vous vouliez utiliser les icônes à différentes tailles. Pour faire court, pour obtenir les bonnes icônes, il fallait les concevoir soi-même.

Au fil du temps, les choses se sont un peu améliorées, avec divers packs d’icônes qui ont germé ici et là (marchés, petits sites). Mais ce n’était pas encore parfait. Même avec ces sites, vous deviez toujours sortir et chercher des icônes par vous-même, au lieu d’avoir une sorte de bibliothèque facilement accessible.

C’est là que Font Awesome entre en jeu.

Une fois que vous avez connecté votre site à Font Awesome, vous pouvez accéder à chaque icône via une simple balise HTML. Par exemple, pour obtenir cette icône sympa:

icône de voiture

… Tout ce que je dois faire est d’utiliser un morceau de code comme celui-ci:

Font Awesome le prendra et le convertira en icône en direct. Et vous pouvez aussi vraiment personnaliser ces icônes. Vous pouvez modifier les tailles, les couleurs et les nuances – en gros, vous pouvez faire tout ce qui est réalisable via CSS. À votre connaissance, ces icônes se comportent comme n’importe quelle autre police.

Font Awesome vous offre également des fonctionnalités uniques, telles que la possibilité d’animer vos icônes. Donc, au lieu d’une version statique comme celle-ci:

icône statique

… Vous pouvez obtenir quelque chose comme ça:

rotation de l'icône

Et cela peut être fait avec n’importe quelle icône Font Awesome.

Par conséquent, la question est:

Est-il bon?

À mon avis, les principales forces de Font Awesome sont:

  • la bibliothèque est vraiment grande, comptant actuellement plus de 630 icônes
  • chaque icône est facile d’accès une fois que vous avez intégré votre site à la bibliothèque principale
  • ce sont tous des vecteurs, vous pouvez donc faire ce que vous voulez avec la façon dont les icônes sont affichées
  • il est très facile d’ajouter une icône n’importe où.

Très franchement, Font Awesome fait ce qu’il fait vraiment très bien.

Pour couronner le tout, il n’y a pas beaucoup de courbe d’apprentissage. Une fois que Font Awesome est installé sur votre site, il vous suffit de:

  • parcourez les icônes disponibles pour avoir un bon aperçu de ce qui s’y trouve
  • consultez les exemples (traitez-les comme un guide pratique rapide).

La qualité visuelle des icônes elles-mêmes est également très élevée. Un problème commun avec de nombreux packs d’icônes disponibles sur le Web est qu’ils ont tendance à ne paraître bien qu’à des tailles spécifiques, en raison de choses telles que trop ou trop peu de détails, des formes floues, etc. Mais les icônes Font Awesome ne sont pas du tout comme ça. Il semble qu’ils aient été conçus pour fonctionner n’importe où et pour avoir fière allure quelle que soit la taille que vous souhaitez utiliser. De plus, souvenons-nous qu’ils sont tous des vecteurs, donc la mise à l’échelle n’est pas non plus un problème technique.

Plus important encore, les icônes Font Awesome atteignent trois objectifs principaux en termes de conception:

  • Les conceptions sont cohérentes d’icône en icône, donc tout s’accorde.
  • Les conceptions sont très minimes, ce qui aide les icônes à diverses fins (elles ont l’air particulièrement bonnes pour les éléments de navigation).
  • La quantité devient une qualité – peu importe le nombre d’icônes dont vous avez besoin, Font Awesome sera en mesure de fournir.

D’accord, passons à la partie pratique de l’examen:

Comment utiliser Font Awesome avec WordPress?

Tous ces éloges mis à part, voyons simplement comment nous pouvons utiliser Font Awesome avec WordPress.

Et… il y a un problème.

Ou plutôt, il y a un problème si vous n’êtes jamais allé dans la section “apparence / éditeur” de wp-admin.

Voici ce que je veux dire:

Pour installer Font Awesome sur votre site WordPress, vous avez deux options:

  • Installation manuelle
  • Via des plugins

Et voici le kicker: Font Awesome est l’un des rares cas où faire les choses de manière manuelle est en fait mieux que d’utiliser des plugins.

Détournons-nous un peu de notre examen principal et montrons-nous:

Si vous recherchez un plugin Font Awesome, vous tomberez probablement sur ces deux:

  • Better Font Awesome – affichez les icônes Font Awesome n’importe où dans le contenu de votre blog.
  • Font Awesome 4 Menus – affiche les icônes Font Awesome dans les menus.

Bien que les deux fassent techniquement leur travail, il y a quelques problèmes.

Commencer avec Better Font Awesome, comme vous pouvez l’imaginer, obtenir la fonctionnalité est simple – il suffit d’installer et d’activer le plugin (vous n’avez pas besoin d’aller à Font Awesome lui-même ou quoi que ce soit). Tout ce dont vous avez besoin est le plugin.

Après l’installation, vous obtenez cette boîte dans votre écran de post-édition:

insérer une icône via le plugin

En cliquant dessus, vous pourrez choisir une icône Font Awesome et l’inclure en tant que shortcode. Cool.

Cela fonctionne la plupart du temps, à en juger par les critiques. Mais pas toujours. Par exemple, pour moi, cela a complètement gâché mon CSS – comme dans, mon style de thème entier a cessé de fonctionner (et c’est le thème par défaut de Twenty Fifteen dont nous parlons ici, donc rien de spécial).

Maintenant, je ne dis pas que le plugin vous posera également ces problèmes, mais vous risquez de rencontrer divers problèmes tels que celui-ci au fil du temps – en particulier lorsque de nouvelles versions de Font Awesome ou WordPress sont publiées. Cela n’en vaut peut-être pas la peine. Imaginez un jour que vous mettez à jour votre site et que votre CSS disparaisse. Combien de temps cela vous prendra-t-il pour revenir sur le problème avec un plugin spécifique? Combien de visiteurs verront le site dépouillé dans l’intervalle?

Maintenant à propos de l’autre plugin, Font Awesome 4 Menus. Cela fonctionne et semble fonctionner assez bien. Tout ce que vous faites est de l’installer, puis vous pouvez ajouter des classes personnalisées à vos éléments de menu, comme ceci:

ajouter une classe d'icônes

Les classes sont les mêmes que celles répertoriées dans la documentation officielle Font Awesome. Le plugin prend soin de la couleur de l’icône pour correspondre au menu, l’espacement, tout.

icônes de menu

C’est très bien si vous avez juste besoin de Font Awesome pour vos menus, mais, malheureusement, cela ne fonctionne pas si vous souhaitez afficher des icônes dans le contenu. Pièce A):

icône manquante

À mon avis, vous feriez mieux d’intégrer Font Awesome à votre site WordPress à la main, sans aucun plugin. Il y a moins de tracas à long terme et l’intégration semble être beaucoup plus stable.

Comment intégrer des polices impressionnantes avec WordPress

Essentiellement, comme détaillé ici, vous pouvez le faire de deux manières différentes:

  • Obtenez le code d’intégration direct directement à partir de Font Awesome.
  • Téléchargez le package puis téléchargez-le sur votre serveur via FTP.

Au départ, j’ai été tenté de le télécharger et de le faire héberger moi-même, mais j’ai réalisé que cela ne signifierait que du travail supplémentaire. Certes, obtenir le package lui-même et le télécharger via FTP n’est pas beaucoup de travail (#lazy), mais vous devez également vous assurer de le maintenir à jour.

En revanche, lorsque vous utilisez une intégration, tout est pris en charge pour vous. Et en mettant de côté tous les travaux de maintenance, vous obtenez également le pack servi à partir d’un CDN, ce qui est également meilleur pour les performances.

La partie pratique est très simple, il suffit de saisir votre e-mail et de vous faire livrer le code d’intégration:

commencer avec Font Awesome

Font Awesome vous enverra un e-mail de bienvenue avec votre code d’intégration, ainsi qu’une option pour enregistrer ce code, ce qui vous offre des avantages supplémentaires. (Remarque: ce n’est pas obligatoire, vous n’avez pas besoin de vous inscrire pour obtenir la fonctionnalité principale Font Awesome.)

Donc, une fois que vous avez votre code, allez dans la section ‘apparence / éditeur’ de votre wp-admin (effectuez toujours une sauvegarde de l’ensemble de votre site et de tous les fichiers individuels avant d’apporter des modifications) et ajoutez ce code dans la section de votre thème. C’est généralement dans le fichier header.php, comme ceci:

section de tête

Remarque: Gardez à l’esprit que si vous mettez à jour votre thème, cette intégration Font Awesome disparaîtra et vous devrez la refaire. Cependant, lorsque vous utilisez un thème enfant (comme mentionné dans un article précédent), il n’y a pas un tel problème.

Juste après avoir inclus le code d’intégration, vous avez activé Font Awesome sur votre site. Travail accompli – vous pouvez maintenant commencer à utiliser toutes les icônes à votre guise!

Facultatif: enregistrement de votre compte Awesome Font

Comme je l’ai mentionné, lors de l’obtention du code d’intégration, vous avez également la possibilité d’enregistrer votre compte avec Font Awesome. Ce n’est pas obligatoire, mais je vous recommande de le faire. Le compte est gratuit et vous obtenez deux ou trois choses en retour:

  • La possibilité de configurer votre intégration.

Personnalisation impressionnante de l'intégration des polices

  • Quelques belles statistiques sur les icônes que vous utilisez.

Vaut-il la peine de devenir premium?

Quelque chose que je ne savais pas au début était que Font Awesome offrait également une version premium de leur produit appelée Fort Awesome.

Les choses clés à savoir à ce sujet:

  • Il a des milliers d’icônes supplémentaires. Avec Fort Awesome, vous obtenez de nombreuses icônes supplémentaires divisées en ensembles individuels (thématiques, différents styles de conception, etc.). Cela vous permet de satisfaire tous les besoins en icônes de votre site grâce à un seul outil, surtout si vous avez besoin d’un ensemble de choses très spécifique à représenter via des icônes..
  • Vous pouvez télécharger et utiliser vos propres icônes. C’est cool car cela vous permet de télécharger des éléments tels que votre logo, des icônes de produit ou tout autre élément logique, et de les ajouter à votre bibliothèque Font Awesome. La force ici est que vous pouvez ensuite utiliser ces icônes comme toutes les autres icônes Font Awesome – toutes vos icônes fonctionnent de manière cohérente, quelle que soit la source.
  • Vous obtenez des paramètres personnalisés. Vous pouvez définir les domaines dans lesquels vos kits d’icônes peuvent être utilisés, etc..
  • Vous pouvez inclure des polices de caractères dans vos kits. Vous pouvez choisir parmi quelques-unes des meilleures polices gratuites ou télécharger les vôtres. Cela conserve vos actifs de typographie pour le site en un seul endroit.
  • Vous pouvez charger tout cela via un CDN optimisé fourni via MaxCDN.

En fin de compte, le cœur de l’offre premium de Font Awesome est sa facilité d’utilisation, ses améliorations de performances et sa gestion globale facile de toutes vos icônes et polices de caractères.

Les plans commencent à 49 $ par an (il y a un essai gratuit). Voici ce qu’il y a dedans:

Forfaits impressionnants

Cela dit, cette offre premium est probablement quelque chose dont seuls les grands sites Web, les magasins de commerce électronique ou les sites Web thématiques bénéficieront. À la fin de la journée, vous n’aurez probablement besoin que d’une poignée d’icônes sur votre site, et vous ne les mettrez pas à jour très souvent – du moins si nous parlons de blogs WordPress standard.

D’autre part, les goûts des magasins de commerce électronique pourraient créer des icônes personnalisées pour des produits individuels, ou utiliser divers kits d’icônes pour rendre leurs pages plus attrayantes pour l’acheteur. Mais c’est toujours une question de volume. Les petits catalogues de produits peuvent très bien faire avec des icônes créées manuellement pour chaque produit, sans Font Awesome, donc ils ne bénéficieront toujours pas beaucoup des packages premium.

En outre, il convient de souligner que Font Awesome premium n’est pas un type de package «tout compris». Il existe des kits d’icônes payants supplémentaires (jusqu’à 50 $ par pièce), vous pouvez donc vous retrouver à chercher votre portefeuille même après avoir reçu l’offre premium.

En résumé, Fort Awesome (Font Awesome premium) n’est pas nécessairement la meilleure option pour la plupart des blogs WordPress. Je crois honnêtement que le fait de suivre l’offre gratuite répondra probablement à vos besoins 99% du temps.

En ce qui concerne la prime, il s’agit probablement d’un bon investissement uniquement si vous gérez un site plus grand qui s’appuie sur des représentations visuelles de divers éléments, produits ou menus et ajoute de nouveaux éléments à la bibliothèque très fréquemment. Dans ces scénarios, vous bénéficierez également de la livraison CDN de Font Awesome, ce qui accélérera votre site dans le processus.

Conclusion

Je pense vraiment que Font Awesome est un excellent produit. Il n’a jamais été aussi facile d’incorporer des icônes sympas et bien conçues à votre site Web. Vous n’êtes littéralement qu’un éloignez (presque?) l’icône parfaite pour tout ce que vous voulez visualiser.

Font Awesome en bref:

  • Font Awesome free: Oui, oui, oui.
  • Police Awesome premium (Fort Awesome): Meh.
  • Divers plugins WordPress Awesome Font: D’accord, mais pas magnifique.

Enfin, soulignons également que Font Awesome est un projet entièrement open source que vous pouvez utiliser à peu près à toutes fins, y compris commerciales – vous n’avez pas à payer de frais supplémentaires ni demander la permission à quiconque.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map