[BASH] Utiliser l’API fontello.com
générer et mettre à jour une police d’icônes webfont en quelques secondes
Fontello propose de composer une webfont d’icônes sur mesure en piochant parmi plusieurs collections (Font Awesome, Web Symbols, ...) Le service est très bien fait, rapide et simple d’utilisation. Mais vous pouvez gagner encore plus de temps lors de l’ajout d’icônes supplémentaires an passant directement via l’API.
Allons directement dans le vif du sujet en créant un fichier Makefile [1] quelque part en amont de votre projet :
- # Makefile
- FONT_DIR ?= ./css/icons
- PROJECT_NAME ?= projet_foo
- FONTELLO_HOST ?= http://fontello.com
- fontopen:
- @if test ! `which curl` ; then \
- echo 'Install curl first.' >&2 ; \
- exit 128 ; \
- fi
- curl --silent --show-error --fail --output .fontello \
- --form "config=@${FONT_DIR}/config.json" \
- ${FONTELLO_HOST}
- x-www-browser ${FONTELLO_HOST}/`cat .fontello`
- fontsave:
- @if test ! `which unzip` ; then \
- echo 'Install unzip first.' >&2 ; \
- exit 128 ; \
- fi
- @if test ! -e .fontello ; then \
- echo 'Run `make fontopen` first.' >&2 ; \
- exit 128 ; \
- fi
- rm -rf .fontello.src .fontello.zip
- curl --silent --show-error --fail --output .fontello.zip \
- ${FONTELLO_HOST}/`cat .fontello`/get
- unzip .fontello.zip -d .fontello.src
- rm -rf ${FONT_DIR}/*
- mv `find ./.fontello.src -maxdepth 3 \( -name "config.json" -o -name "*.woff" -o -name "*.ttf" -o -name "*.svg" -o -name "*.eot" \) ` ${FONT_DIR}
- mv `find ./.fontello.src -maxdepth 3 -name "${PROJECT_NAME}-codes.css"` ${FONT_DIR}/codes.scss
- rm -rf .fontello.src .fontello.zip
Passons rapidement le script en revue
Tout d’abord, on doit éditer le script pour renseigner 2 informations :
- FONT_DIR, qui est l’emplacement du dossier qui va recevoir les éléments issus de fontetto (.ttf, .woff. css, .css, ...), relativement au fichier Makefile. Personnellement j’ai choisi un dossier "icons" dédié à cela, et distinct des polices (webfonts) complètes qui elles sont dans un autre dossier "fonts".
- PROJECT_NAME qui désigne le nom du projet.
A présent, direction fontello.com où vous pouvez commencer à composer votre webfont personnalisée projet_foo. Enregistrez (bouton en haut à droite), téléchargez le .zip et récupérez le fichier config.json (qui est le seul qui nous intéresse) et copiez le dans le dossier FONT_DIR.
À l’usage
À partir de maintenant, l’ajout ou modification d’icônes va se faire en un clin d’oeil via 2 commandes successives, issues du fichier Makefile :
- make fontopen
inspecte le fichier config.json et ouvre le navigateur avec les paramètres d’édition sauvegardés.
- make fontsave
récupère la version mise à jour du projet_foo en écrasant les anciens fichiers.
Pour ma part, c’est surtout le fichier projet_foo-codes.css avec les codes qui m’importe (voir et modifier au besoin la ligne 32) ; c’est pourquoi je renomme en codes.scss pour l’appeler ultérieurement dans la compilation SASS.