glyphicons not showing with sass bootstrap integration

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");

Are there any errors showing up, when you call the gulp command in the terminal? — Semo, Jun 09 '16 at 15:09

score 24 · Answer 1 · answered Feb 18 '16 at 02:33

24

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!

answered Feb 18 '16 at 02:33

halfred

777
1
9
16

1

worked for me by removing `build` from the target path – coding_idiot Sep 17 '16 at 02:21
2

Didn't work for me. Using Laravel 5.3 and modified gulpfile.js – Basil Musa Oct 04 '16 at 09:14
3

@BasilMusa Laravel 5.3 remove build dir – cmac Oct 14 '16 at 23:56
2

mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/bootstrap'); @BasilMusa – cmac Oct 14 '16 at 23:57

score 8 · Answer 2 · answered Jan 14 '16 at 17:42

8

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/';

answered Jan 14 '16 at 17:42

Marcin Nabiałek

109,655
42
258
291

@Chriz74 So where your font actually are In `public/css/fonts` or in `public/css/fonts/bootstrap`? If in the second one try changing if with valid path. – Marcin Nabiałek Jan 14 '16 at 18:26
Second one, bootstrap – Chriz74 Jan 14 '16 at 18:28
So try with `$icon-font-path: '/css/fonts/bootstrap/'; at the same beginning of your `app.scss` file – Marcin Nabiałek Jan 14 '16 at 18:30
error was here: I was trying with `` instead of `` – Chriz74 Jan 15 '16 at 11:14

score 7 · Answer 3 · answered Oct 04 '16 at 10:40

This is what worked for me in Laravel 5.3 on Windows

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/
Run npm install

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');
});

Run gulp:
```
gulp
```
Thats it.

score 4 · Answer 4 · answered Jul 12 '17 at 15:22

4

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.

answered Jul 12 '17 at 15:22

Jithin

2,594
1
22
42

score 3 · Answer 5 · edited Feb 03 '17 at 07:48

3

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/';

edited Feb 03 '17 at 07:48

Neels

2,547
6
33
40

answered Feb 03 '17 at 04:49

Kzy

492
4
11

I use Laravel 5.4, icons doesn't work. I checked my `app.css` file and saw that font's path is `/fonts/`. When I manually edit this path to `../fonts` instead of `/fonts` it works. I can not figure out how to make this path. I can't change `$icon-font-path' to `../fonts`, it gives me an error. – Rashad Apr 02 '17 at 02:24
Hi! Make sure your font folder is in `public` directory and to modify your path it should go like this. `$icon-font-path: '/fonts/';` note: you have to edit it on `resources/assets/sass/` – Kzy Apr 03 '17 at 06:35
1

It was in public. I fixed. I changed publicPath in 'webconfig.mix.js' file. Set publicPath for fonts to '../' – Rashad Apr 03 '17 at 06:37
In a clean install of Laravel 5.4 you simply have to do `npm install` and `npm run dev`; the default Laravel setup is already correct. – Jordan Apr 28 '17 at 13:15

score 1 · Answer 6 · answered Oct 14 '16 at 23:56

1

Laravel 5.3 remove build

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

run gulp

answered Oct 14 '16 at 23:56

cmac

3,123
6
36
49

score 1 · Answer 7 · answered May 13 '17 at 14:07

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.

score 1 · Answer 8 · answered Jun 05 '17 at 10:57

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

score 0 · Answer 9 · answered Sep 09 '16 at 11:39

0

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.

answered Sep 09 '16 at 11:39

cajuc

1
1

score 0 · Answer 10 · answered Dec 22 '16 at 03:18

0

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!

answered Dec 22 '16 at 03:18

Dev

113
1
2
13

score 0 · Answer 11 · edited Jan 31 '18 at 22:22

0

In webpack.config.js set:

publicPath: '../'

Instead of Mix.resourceRoot

edited Jan 31 '18 at 22:22

davidkonrad

83,997
17
205
265

answered Jan 31 '18 at 21:48

Kashif Saleem

132
2
12

score 0 · Answer 12 · answered Jun 18 '19 at 14:51

Bootstrap4 doesn't come with icons anymore bootstrap icons

you can use Font Awesome instead for example.

Build your webpack.mix.js configuration.

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Install Font Awesome.

npm install @fortawesome/fontawesome-free

In /resources/sass/app.scss import one or more styles.

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

now compile.

npm run production
or
npm run dev

Finally, reference your new CSS file in your layout.

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

Jeff · Answer 13 · 2016-02-18T15:00:35.410

-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";

edited Feb 18 '16 at 15:00

answered Jan 14 '16 at 17:37

Jeff

24,623
4
69
78

@Chriz74 because my CSS file is in `build` when I mix it with elixir. So when that file references fonts, they are relative to the `build` folder, not the `public` folder. – Jeff Jan 15 '16 at 13:51

score -1 · Answer 14 · answered Jan 18 '16 at 22:18

-1

Try something like:

var gulp = require('gulp');

gulp.task('fonts', function() {
   gulp.src('.node_modules/bootstrap-sass/assets/fonts/bootstrap/fonts/*.{ttf,woff,eof,svg,woff2}')
   .pipe(gulp.dest('public/css/fonts'));
});

and then add

mix
//other scripts
.task('fonts')

answered Jan 18 '16 at 22:18

Deciple

1,864
3
16
19

thanks but it was working already, error was here: I was trying with `` instead of `` – Chriz74 Jan 19 '16 at 12:04

glyphicons not showing with sass bootstrap integration

14 Answers14

For Laravel 5.4

Linked