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

You should in your app.scss before including bootstrap file set variable $icon-font-path value correctly, probably in your case it should be:

$icon-font-path: '/css/fonts/';

Answer 2

In Laravel 5.4 what I did is

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

And in resources/assets/sass/_variables.scss or app.scss

$icon-font-path: '/fonts/bootstrap/';

Answer 3

This is what worked for me in Laravel 5.3 on Windows

1. First make sure you are using the NodeJS package latest version (v6.7.0)

   Click the tab "Current Latest Features" at the URL https://nodejs.org/en/download/current/

2. Run npm install

3. Modify the file gulpfile.js to contain the following:

   elixir(mix => {
       mix.sass('app.scss')
          .webpack('app.js');
       mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/','public/fonts/bootstrap');
   });
   

4. Run gulp:

   gulp
   

5. Thats it.

Answer 4

I had the same problem using Laravel 5.4 It turns out that I hadn't run npm install and npm run dev.

Once these two commands were run, the fonts (and glyphicons) were copied correctly into the /public directory. There was no need to edit any sass or build files.

Answer 5

• Look into developer tools of your browser watch the path.
• In mine, it was public/fonts/glyphicons-halflings-regular.ttf I downloaded those fonts manually placed them there.
• And it worked!

Answer 6

In Laravel 5.4, just install npm dependencies and run npm in production or dev as needed.

npm install
npm run production

Laravel will do the rest.