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.