Inscription à la newsletter

Tutoriel réalisé avec Illustrator CC 2022

Il existe une bibliothèque d’icônes gratuites et payantes, très utilisée par les développeurs web et les graphistes, qui s’appelle Font Awesome. Celle-ci met à votre disposition plus de 1 500 icônes gratuites et plusieurs milliers d’icônes payantes que vous pouvez utiliser dans tous vos projets.

Dans ce tutoriel, je vais vous montrer comment utiliser une icône de cette bibliothèque sur Illustrator et comment la modifier si besoin.

 

Comment utiliser les icônes de Font Awesome sur Illustrator ?

Télécharger des icônes Font Awesome

Pour utiliser les icônes de Font Awesome, vous devez, tout d’abord, les télécharger. Pour cela, rendez-vous sur le site de Font Awesome, cliquez sur Start for Free, puis, un peu plus bas, sur Download et, enfin, sur Free For Desktop à droite (ou Pro For Desktop si vous souhaitez avoir accès aux icônes payantes et donc choisir un plan payant) : selon vos paramètres, votre navigateur vous demandera un emplacement où enregistrer le fichier compressé (ZIP) ou l’enregistrera d’office.

Une fois téléchargé, décompressez-le. J’utilise personnellement 7-Zip qui est gratuit donc je fais un clic droit dessus > 7‑Zip > Extraire vers « fontawesome-free-6.0.0-desktop\ », puis je supprime l’archive et peux ouvrir le dossier décompressé.

Ici, c’est le dossier svgs qui m’intéresse et, plus particulièrement, regular. Comme j’ai défini l’utilisation de Firefox pour l’ouverture des fichiers SVG, par un double-clic sur un des fichiers, l’icône est ouverte dans mon navigateur.

 

Rechercher des icônes Font Awesome

Pour retrouver plus facilement une icône, je vous conseille d’utiliser la recherche sur Font Awesome où, pour cet exemple, je vais appliquer le filtre Free puisque j’ai des icônes gratuites et Regular puisque je suis dans ce dossier sur mon ordinateur. Si je recherche l’icône de smiley avec des étoiles dans les yeux, je vois qu’elle s’appelle face-grin-stars :

Face grin stars Font Awesome

Je peux donc la retrouver dans le dossier regular, sur mon ordinateur, sous ce nom.

 

Ouvrir des icônes Font Awesome avec Illustrator

Lorsque j’ai identifié l’icône que je souhaite utiliser dans Illustrator, je fais un clic droit dessus > Ouvrir avec > Adobe Illustrator 2022 : mon icône s’ouvre dans Illustrator. La même chose peut être effectuée dans Illustrator via le menu Fichier > Ouvrir… ou Ctrl + O (ou Cmd + O sur Mac).

Je peux maintenant l’utiliser dans mes projets en la déplaçant, en la redimensionnant, etc.

 

Comment modifier les icônes de Font Awesome sur Illustrator ?

Si vous faites un clic droit sur l’icône, vous voyez que vous ne pouvez pas dissocier les tracés pour, par exemple, mettre les étoiles d’une couleur différente du reste.

Pour remédier à cela, je vais utiliser le Pathfinder en affichant la fenêtre via le menu Fenêtre > Pathfinder ou en faisant Ctrl + Maj + F9 (ou Cmd + Maj + F9 sur Mac).

En gardant l’icône sélectionnée avec l’Outil Sélection Outil Sélection, je clique sur Réunion Pathfinder Réunion du Pathfinder et, enfin, je fais un clic droit sur l’icône > Dissocier. Je fais un clic ailleurs et je peux désormais personnaliser chaque élément.

Pour cet exemple, je sélectionne les 2 étoiles et leur applique une couleur violette (#9910E8) :

Face grin stars Illustrator

 

Si vous aimez ce genre d’icônes, n’hésitez pas à m’en faire part et à me dire s’il y a des icônes que vous souhaiteriez que je crée pour de prochains tutoriels Illustrator.

Enfin, si vous souhaitez bien débuter avec Illustrator, les 25 pas-à-pas pour Illustrator vous permettront de vous familiariser avec les différents outils de ce logiciel.

Inscription à la newsletter

Et si vous souhaitez vous former davantage à Illustrator,
cliquez sur ce lien pour découvrir la formation 25 pas-à-pas pour Illustrator.