Nous utilisons régulièrement Font Awesome, nous l’avons modifié et adapté. It’s Awesome !
Malheureusement, Font Awesome est lourd. Il contient une tonne d’icônes, plein d’entre eux nous sont inutiles. Nous devons souvent nous arranger d’une icône qui ne nous convient pas tout à fait. Comme Font Awesome est Awesome, mais avec des défauts, nous allons faire le notre !
FontQuoiEncore ?
FontAwesome est un set d’icône au format vectoriel dans une police de caractère. Les caractères dans la police sont vos icônes.Les icônes au format vectoriel peuvent s’agrandir sans détérioration ou lorsqu’on les zooms, du coup ils peuvent être dans un format tout petit. Avec les écrans haute résolution (Rétine, 4k…) sur de plus en plus de support (tablette, mobiles et desktop), c’est une bonne idée d’en utiliser dans une application web ! Le seul écueil de cette pratique est que l’icône ne peut être que d’une seule couleur, mais vous pouvez ajouter quelques tricks CSS3 pour lui mettre un dégradé, de l’ombre où je ne sais ce qui vous passe par la tête.
Créons donc notre set d’icônes comme FontAwesome.
Font Custom est un outil pour convertir des images au format SVG en un format d’icône FontAwesome-esque.Cet outil a besoin de quelques packages qui s’installent à l’aide de brew ou apt-get (Mac et Lunix pour le moment) et un gem ruby pour surveiller et compiler la police de caractères (tutoriel d’installation).
Une fois installé, vous pouvez lancé la surveillance du dossier contenant vos SVGs il recompilera le dossier lorsque des changements interviendrons, vous pouvez également simplement lancé la compilation une fois vos SVGs prêts. La sortie de la compilation se composera de quelques fichiers du set d’icônes pour une compatibilité inter navigateur et d’un fichier CSS avec les classes correspondantes (vache.svg marchera avec icon-vache).
Une fois que vous aurez votre set d’icônes construit, vous avez presque fini. Importer le fichier CSS, fichiers de police de caractères dans votre projet et ajouter la classe de l’icône que vous souhaitez dans le DOM. Votre set d’icône est prêt à être utilisé !
Attention, le tutoriel sur fontcustom contient des erreurs, pour installer fontforge avec brew, voici la commande qui marche pour à ce jour :
brew install -v fontforge --HEAD --with-libspiro --enable-pyextension
il faudra peut être en passer par un brew update, brew doctor, brew uninstall fontforge, brew upgrade … Enfin vous êtes grands !!
Enjoy !