Créer une icône Font Awesome like

Font Awesome Icons

En tant que développeur – intégrateur, il peut arriver parfois que l’on soit obligé d’intégrer une icône qui n’existe pas dans l’énorme liste d’icônes de Font Awesome. Le but ici n’est pas d’intégrer une icône dans la font de Font Awesome. Il s’agit d’intégrer une icône pour que le résultat soit identique aux icônes Font Awesome.

L’exemple de Skuadron

Rendu font icon skuadron

Il se trouve que j’étais entrain de faire une refonte de mon site web au moment où j’ai intégré la super équipe de Skuadron. L’idée m’est venue d’intégrer mon profil Skuadron sur mon site, via une icône type “social network”. Pour se faire, il me fallait une icône malléable, notamment en taille et en couleur.

La première étape consiste à récupérer le logo qui vous intéresse (après avoir vérifié si vous avez le droit de le faire, ça va de soi !). 

Pour se faire, munissez-vous de votre logiciel d’édition/retouche préféré (chez moi c’est GIMP). Faites en sorte de rendre votre logo avec une seule couleur et avec un fond transparent comme ci-contre :

Votre logo doit être en PNG, le JPG ne supporte pas la transparence.

Conversion vers une icône Font Awesome

La deuxième étape va convertir votre PNG en SVG. Le SVG un est dessin vectoriel basé sur XML. Pour convertir votre image, on peut utiliser l’excellent convertisseur en ligne pngtosvg ! Récupérez votre SVG et ouvrez-le avec votre éditeur de texte/IDE de prédilection (Sublim Text, Atom, PHPstorm…) et modifiez l’attribut “fill” avec la couleur de votre choix. Les attributs “width” et “height” vous servirons à modifier la taille de votre SVG.

Pour intégrer l’icône SVG où vous souhaitez, deux façon :

  • Copiez le bloc SVG dans votre HTML, où vous en avez besoin
  • Ou bien mettre le fichier SVG (avec la couleur modifiée) dans un dossier “image” et utiliser la balise HTML <img /> pour l’intégrer simplement.

Voilà un exemple d’intégration !

Le logo Skuadron apparaît, ni vu ni connu, comme s’il avait toujours fait parti de la bibliothèque Font Awesome !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


libero elit. leo. venenatis id, consequat. dictum Phasellus risus. id at Praesent