Laravel 5.4 include bootstrap glyphicons

Question

How can I include Bootstrap glyphicons in Laravel 5.4?

network tool in Chrome show a 404 error to the following broken links: http://localhost/fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb http://localhost/fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158 http://localhost/fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512

the path should be http://localhost/myapp/public/font/glyphicons-halflings-regular...

Should I fix these links in order to have bootstrap glyphicons? if yes, how and where?

Posts about this concern talk about previous version of Laravel that uses a gulpfile.js which doesn't exit in a laravel 5.4 project.

The path seems correct. Your public root should be the public folder of your app. It seams to me that your vhost is the problem, not the glyphicons. I guess your other assets will be broken as well (or you are using the wrong path for them) — Pevara
does it mean that I should my url localhost pointing to c:\wamp64\myapp\public\ ? This line {{ asset('fonts') }}, returns http://localhost/myapp/public/fonts so my other links are working properly. — Warrio

ankit patel ankit patel · Accepted Answer · 2017-02-27T23:13:13

@Warrio, Yeah you are right that Laravel 5.4 not use gulp, instead of gulp it uses webpack mix to load all dependencies.

I had same issue and solved by update package.json to

 {
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.1",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

After update your package.json file, run "npm install" and it will solve your problem.

Laravel 5.4 include bootstrap glyphicons

1 Answers