web-dev-qa-db-fra.com

Laravel 5.7 + Police Awesome

J'essaie d'inclure la boîte à outils Font Awesome dans Laravel 5.7.

Ce sont les étapes que j'ai prises:

1) Run npm install --save-dev @fortawesome/fontawesome-free

2) Vérifiez les dossiers dans node_modules/ et tout va bien.

$fa-font-path: "../webfonts";

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

3) Puis j'ai couru ...

npm run development -- --watch

4) Je vois des fichiers dans public/fonts/vendor/@fortawesome/fontawesome-free/.

Cependant, lorsque je vais sur le navigateur, les icônes ressemblent à ceci:

down_icon

laravel-5npmfont-awesomelaravel-mixlaravel-5.7
11
Nico

Laravel 5.7, 5.8, 6.0+ et Font Awesome 5 (la bonne manière)

Construisez votre configuration webpack.mix.js .

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Installez la dernière version gratuite de Font Awesome via un gestionnaire de paquets tel que npm .

npm install @fortawesome/fontawesome-free --save

Cette entrée de dépendance devrait maintenant figurer dans votre package.json .

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",

Dans votre fichier SCSS principal, / resources/sass/app.scss importez un ou plusieurs styles.

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

Compilez vos actifs et produisez une version réduite, prête pour la production.

npm run production

Enfin, référencez votre fichier CSS généré dans votre modèle/disposition de lame.

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
32
Karl Hill

mettez à jour votre configuration webpack.mix.js comme ci-dessous:

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

mix.setPublicPath('public');
mix.setResourceRoot('../');

tapez 'npm run dev' dans votre terminal et appuyez sur Entrée

6
MUHAMMED IQBAL PA