Sunday, April 2, 2017

Laravel 5.4 - Bootstrap glyphicons don't work

Well, I just installed fresh Laravel 5.4. Then installed npm and decided first time to use webpack instead of gulp.js. As you know, Laravel default provides sass Bootstrap. Used this command to generate my css from sass.

npm run dev

Bootstrap, Jquery worked perfect, but Glyphicons weren't displayed. Checking my public/css/app.css I saw, that Glyphicons font-face path are not suitable.

 src: url(/fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1);

If I, manually use ../fonts instead of /fonts it will work. I tried to figure out and edit the default path. In _variables.css I set:

$icon-font-path = "../fonts" - but npm gives error.

By default it is: "~bootstrap-sass/assets/fonts/bootstrap/"

Copied fonts folder inside puclic/css folder, didn't work.

Added options to the webpack.mix.js file:

options({processCssUrls: false})

and in _variables.css again set:

$icon-font-path = "../fonts"

Run npm-run-dev and it worked, glyphicons were displayed. But, I don't want to set false for processCssUrls. Because, in this case I will not able to minimize css files using command: npm run production.

Also, I followed this question, but couldn't find any answer, all solutions didn't work.

glyphicons not showing with sass bootstrap integration



via Rashad

Advertisement