Laravel 5

Intégration de FontAwesome

  • Avatar de ValentinFassey
    Membre depuis :
    31/10/2018
    Messages :
    3

    Bonjour à tous,

    J'utilise depuis peu Laravel et je voudrais connaitre la bestPractice pour l'utilisation des icons issues de FontAwesome.

    Dans un premier temps je l'ai ajouté dans mon package.json

    "devDependencies": {
    "axios": "^0.18",
    "bootstrap": "^4.0.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.5",
    "popper.js": "^1.12",
    "vue": "^2.5.7",
    "font-awesome": "^4.7.0"
    },

    Je retrouve donc dans vendor/components le dossier font-awesome.

    Comment l'inclure facilement dans mes vues, j'ai commencé à travailler sur le webpack.mix.js sans réussite :p.

    J'ai aussi essayer de copier le fontawesome-all.css dans public\css puis l'inclure via <link href="{{asset('css/fontawesome-all.css') }}" rel="stylesheet"> dans ma vue cependant l'icon ne s'affiche pas ..

    En vous remerciant par avance pour votre aide

  • Avatar de bestmomo
    Membre depuis :
    07/04/2013
    Messages :
    2178

    Salut,

    Tant qu'à faire autant utiliser la dernière version de Font Awesome (actuellement la 5.4.2). Pour l'installer tu peux utiliser npm :

    npm install @fortawesome/fontawesome-free

    Puis dans resources/js/app.js :

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

    Ensuite tu recompile ton fichier avec npm et ça devrait fonctionner !

  • Avatar de ValentinFassey
    Membre depuis :
    31/10/2018
    Messages :
    3

    Salut,

    Je n'arrive malheureusement pas à recompiler le fichier avec NPM.

    Quel commande utilises-tu ?

  • Avatar de bestmomo
    Membre depuis :
    07/04/2013
    Messages :
    2178

    Tous les scripts sont référencés dans package.json :

    "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

    Donc en mode développement :

    npm run dev

    Ou avec la recompilation automatique à chaque changement :

    npm run watch
  • Avatar de ValentinFassey
    Membre depuis :
    31/10/2018
    Messages :
    3

    Bonjour,

    Parfait je te remercie

    Valentin

Vous ne pouvez pas répondre à ce sujet.