glyphicons not showing with sass bootstrap integra

Question

I used this tutorial to integrate bootstrap in my project:

https://laravel-news.com/2015/10/setup-bootstrap-sass-with-laravel-elixir/

This places an app.css file in the css folder. However if I try to use glyphicons they don't show up. So I tried to modify the elixir file like this:

    elixir(function(mix) {

    mix.sass('app.scss')
        .browserify('app.js')
        .copy('node_modules/bootstrap-sass/assets/fonts', 'public/css/fonts')   

});

The fonts folder is copied under public/css/fonts but yet no icon shows up. What am I missing here? Any clue?

in my app.css the path seems correct, for example:

src: url("fonts/bootstrap/glyphicons-halflings-regular.eot");

Answer 1

Updated answer, I have this implemented now in a much better way, similar to the top answer. In app.scss:

/* BOOTSTRAP */
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

/* FONT-AWESOME */
$fa-font-path: "../../fonts";
@import "node_modules/font-awesome/scss/font-awesome";

Answer 2

In webpack.config.js set:

publicPath: '../'

Instead of Mix.resourceRoot

Answer 3

If you are using elixir() helper in your blade templates, you should put your fonts files into /public/build. As result /public/build/fonts, the "fonts" folder contains all font files.

Answer 4

I had the same problem with fresh install of laravel 5.2. What I did is just inspected the request path in browser which was :

../build/fonts/bootstrap/glyphicons-halflings-regular.woff2

so I just added to gulp.js this :

mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/','public/build/fonts/bootstrap'); 

and afterwards in terminal :

gulp

That did the trick for me!

Answer 5

Laravel 5.3 remove build

mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/bootstrap');

run gulp

Answer 6

For Laravel 5.4

This answer didn't exactly solved my problem but it pointed me to the right direction. This is my solution and it covers both if you have defined url for your application (using homestead or some other VM/Vagrant/etc. or if you have set vhost and hosts file for your application), or if you're like me, and have installed lamp stack/xampp/wamp/mapm/etc and doing development from apache htdocs sbfolder.

Firstly you need to add
mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/');
in your webpack.mix.js at the end of the file.

Next open up resources/assets/sass/_variable.scss and edit $icon-font-path value.

If you're not using homestead but some lamp stack where you don't have defined dev url for your application (you didn't set vhost and changed hosts file), but instead you're accessing it as a subfolder e.g. localhost/YOUR_APP/public/ then you should set icon font path like
$icon-font-path: "/YOUR_APP/public/fonts/";

If you have set url for your application, you just need to set icon font paht like
$icon-font-path: "/public/fonts/" and recompile css file. You should change to this before pushing your application to the production if it's not set at first!!!

For those who don't know how to recompile css and js files follow this steps:
1. Go to the root of your application and run bash there (git bash, cmd, etc.)
2. npm install
3. npm run-script production (you have other flags available but i perfer production as it minifies js and css)
4. Congrats you just recompiled your js and css