web-dev-qa-db-fra.com

Comment ajouter Fontawesome 5 à Symfony 4 à l'aide de Webpack Encore

Je souhaite ajouter Font Awesome 5 à mon projet Symfony 4, voici ce que j'ai fait: 

  • J'ai ajouté une police géniale à mon projet en utilisant le fil: yarn add --dev @fortawesome/fontawesome-free
  • J'ai importé une police géniale dans mon fichier scss principal (assets/css/app.scss): @import '~@fortawesome/fontawesome-free/scss/fontawesome';
  • ma configuration webpack encore inclut mes fichiers scss et js: .addEntry('js/app', './assets/js/app.js') .addStyleEntry('css/app', './assets/css/app.scss')
  • J'ai compilé: ./node_modules/.bin/encore dev

Tout semble aller pour le mieux, mais lorsque j'essaie d'utiliser une police géniale à mon avis, je ne reçois qu'une icône carrée. Le fichier app.css généré semble correct car je peux voir les définitions des icônes de police géniales, par exemple: 

.fa-sign-out-alt:before {
    content: "\F2F5";
}

Il semble simplement que la partie "contenu" est manquante, car les polices ne sont pas chargées ... Dois-je ajouter quelque chose pour charger les polices Web? J'ai essayé d'ajouter la police awesome js dans mon fichier d'actif app.js mais cela ne change rien ... J'ai également essayé d'ajouter des chargeurs personnalisés à la configuration de mon webpack encore (comme ceci https://github.com /shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md#setup-for-webpack-2 ) J'ai également essayé de vider le cache, même résultat ...

Une idée?

symfony4font-awesome-5webpack-encore
9
sylvain

Selon font-awesome docs ici , après l’installation du paquet 

yarn add --dev @fortawesome/fontawesome-free

ou

npm install --save-dev @fortawesome/fontawesome-free

Exigez font-awesome dans votre fichier de configuration (dans mon cas et l'emplacement par défaut de Symfony 4) assets/js/app.js:

require('@fortawesome/fontawesome-free/css/all.min.css');
require('@fortawesome/fontawesome-free/js/all.js');

Compilez à nouveau yarn encore dev et les icônes devraient apparaître.

7
Giovani

Ajout de @import '~ @ fortawesome/fontawesome-free/scss/fontawesome'; n'est pas assez. Vous devez ajouter un (ou une combinaison) de ces fichiers (selon votre cas d'utilisation).

@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
3
ETNyx

Je pense avoir trouvé une solution à votre problème, ce n'est probablement pas le meilleur mais un point de départ. Selon Documentation de Font Awesome , vous devez ajouter le fichier all.css à votre code. Ou les déclarations @fontface imports ici.

import '~@fortawesome/fontawesome-free/css/all.css';

2
Pouyan

Ce qui suit fonctionne parfaitement pour moi:

npm install @fortawesome/fontawesome-free @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons -D

Ajouter ce qui suit dans un fichier .scss

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

fonctionne avec webpack 4

{
    test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use: 'url-loader?limit=10000',
},
{
    test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
    use: 'file-loader',
},
{
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
        'file-loader?name=images/[name].[ext]',
        'image-webpack-loader?bypassOnDebug'
    ]
}]
0
Jesse Quinn