Utiliser les icônes Font Awesome dans Photoshop (et autres logiciels)

PrimFX Boris ('PrimFX') Le 31 août 2019

Bonjour à toutes et à tous !

Vous en avez assez de faire du copier/coller à chaque fois que vous avez besoin d'utiliser des icônes dans vos projets Photoshop, Premiere Pro ou autre ? Je vous propose de découvrir comment utiliser les polices de la célèbre bibliothèque d'icônes en ligne Font-Awesome directement sur votre ordinateur :D

J'utilise de mon côté Font Awesome très régulièrement sur mes projets web ou bien les projets de clients et il s'agit d'un outil très puissant et simple à utiliser.

Du coup, pour faciliter l'utilisation de ces icônes sur mon PC (en plus des pages web), j'ai décidé d'installer Font Awesome et de vous en faire un petit tuto écrit, si ça peut en aider certains parmi vous !

 
Rassurez-vous, l'installation se déroule très vite : seulement 3 petites étapes sont nécessaires :)
 

Etape 1 - Télécharger la police

Dans un premier dans, il faudra simplement se rendre sur cette page du site de Font Awesome et cliquer sur le bouton "Download Font Awesome Free for the Desktop". Ce téléchargement vous donnera une simple archive ZIP que vous pourrez décompresser à l'emplacement de votre choix.

Etape 1 - Télécharger Font Awesome

 

Etape 2 - Installer la police

A présent, maintenant que vous avez le dossier de Font Awesome sous la main, je vous invite à vous rendre dans le dossier otfs où vous devriez trouver trois fichiers OTF :

  • Font Awesome 5 Brands-Regular-400.otf
  • Font Awesome 5 Free-Regular-400.otf
  • Font Awesome 5 Free-Solid-900.otf

Vous pouvez simplement faire un clic droit sur chaque fichier et cliquer sur "Installer". L'installation de chaque fichier ne devrait pas prendre plus de quelques secondes.

Etape 2 - Installation de Font Awesome

 

Etape 3 - Utiliser la police

C'est bon ! Maintenant que la police est installée, vous n'avez plus qu'à en profiter :)

Dans un premier temps, sélectionnez une des polices Font Awesome sur Photoshop (ou autre logiciel). Je sélectionnerai Font Awesome 5 Free Solid pour l'exemple.

Etape 3 - Sélectionner Font Awesome sur Photoshop

Vous pouvez à présent vous rendre sur la bibliothèque d'icônes de Font Awesome et chercher la ou les icône(s) qui vous convient le mieux. Une fois votre bonheur trouvé, deux options s'offrent à vous pour utiliser l'icône : vous pouvez soit retenir le nom de l'icône pour l'écrire par la suite dans Photoshop (en texte brut) soit copier l'icône en cliquant sur le petit bouton prévu à cet effet sur la page de l'icône (encadré en rouge sur l'image ci-dessous).

Etape 4 - Sélectionner l'icône sur Font Awesome

Maintenant que vous avez votre icône, vous n'avez plus qu'à l'utiliser dans Photoshop (ou dans n'importe quel autre logiciel) ! Il y a pour cela deux façons de faire :

  • Entrer le nom de l'icône dans la zone de texte sur Photoshop : le texte sera automatiquement convertit en l'icône reconnue !
  • Coller l'icône copiée depuis Font Awesome

A vous d'utiliser la technique qui vous convient le mieux !

Etape 5 - Utiliser une icône dans Photoshop

Vous l'aurez vu, il n'y a rien de compliqué dans tout ça et l'installation se fait très rapidement. Vous savez désormais comment installer et utiliser Font Awesome sur votre PC... Faites-en bon usage ;)

Si vous avez des questions / remarques, n'hésitez pas à laisser un commentaire ci-dessous !

 


A propos de l'auteur

PrimFX
Boris ('PrimFX')

Je m'appelle Boris, j'ai 22 ans et je suis passionné d'informatique. Suite à mes études (Licence Informatique puis MSc Computer Science au Trinity College Dublin), je gère l'entreprise Single Quote co-fondée en 2019 et je profite de mon temps libre pour partager ma passion à travers des vidéos & articles 😃

Votre commentaire

Vous devez être connecté pour poster un commentaire. Se connecter ou Créer un compte

Commentaires 4

  • SkinDePewDiePie_ Le 3 septembre, à 08:19 | Répondre

    @PrimFX Salut :) Faudrait rebaisser mon image car avec la pub ca rends pas très... beau ! Après tu pourrais mettre aussi une case pour demander si on veux recevoir les notifs du tuto, ca pourrais pratique :)

  • SkinDePewDiePie_ Le 3 septembre, à 08:19 | Répondre

    @PrimFX Salut :) Faudrait rebaisser mon image car avec la pub ca rends pas très... beau ! Après tu pourrais mettre aussi une case pour demander si on veux recevoir les notifs du tuto, ca pourrais pratique :)

  • PrimFX Le 2 septembre, à 13:03 | Répondre

    @SkinDePewDiePie_ Hello :) Merci pour ton commentaire ! Effectivement c'est utile vraiment juste pour une utilisation desktop (sur divers logiciels [b]hors web[/b]) mais pour travailler avec en HTML/CSS il faut bien sûr passer par leurs fichiers prévus à cet effet (pour le web et non pour desktop).

  • SkinDePewDiePie_ Le 1 septembre, à 16:32 | Répondre

    Salut Boris, ça peux être utile pour redimensionner des images déjà existantes de Font Awesome, mais pour un site web, ça peux être utile dans le cas que je viens de citer, mais après on peux installer le CSS sur son site, on aura le même effet... En tout cas, c'est un bon tuto! Et #firstComment x)