Étiquette : CSS

Ajouter la police CSS Font-Awesome dans Aurelia JS

Le package « Font Awesome » vous permet d’utiliser des icônes libres et proportionnelles dans vos pages Web. Effectivement la feuille de style proposé par Font Awesome utilise une police vectorielle représentant des icônes.

Regarder sur les exemples suivant http://fontawesome.io/examples cela va vous plaire.

Lorsque vous utilisez Aurelia CLI, le package NodeJS de « Font awesome » est mal configuré et génère des erreurs.
Je vous propose  donc une recette simple pour bien l’intégrer dans vos développements Aurelia  JS.

1) Installer le package Font-Awesome dans NodeJS :

 
 
npm install font-awesome --save

2)  Dans le fichier « aurelia-project/aurelia.json » ajouter dans le « build » la copie des polices vectorielles dans le dossier « fonts » de votre projet :

 
 
...
"build": {
      ...,
      "copyFiles": {
            "node_modules/font-awesome/fonts/fontawesome-webfont.woff": "fonts/",
            "node_modules/font-awesome/fonts/fontawesome-webfont.woff2": "fonts/",
            "node_modules/font-awesome/fonts/FontAwesome.otf": "fonts/",
            "node_modules/font-awesome/fonts/fontawesome-webfont.ttf": "fonts/",
            "node_modules/font-awesome/fonts/fontawesome-webfont.svg": "fonts/"
      }, ...

3) Toujours sur ce document, dans les dépendances « dependencies » ajouter la description du package « font-awesome » :

 
 
"dependencies": [ 
      ...,
      { 
            "name": "css/font-awesome", 
            "path": "../node_modules/font-awesome/", 
            "main": "css/font-awesome.css"
      }, ...

4) Pour utiliser la police dans une page HTML d’Aurelia, il suffit d’y ajouter après le « <template> » l’instruction suivante :

 
 
<require from="css/font-awesome.css"></require>

Vous noterez le « css/ » devant « font-awesome.css ». Cella permet d’être relative au projet Aurelia, sans devoir copier le dossier « fonts » à la racine de votre site WEB.