没有与sass bootstrap集成显示的glyphicons

Question

我使用本教程在我的项目中集成bootstrap:

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

这会将app.css文件放在css文件夹中.但是,如果我尝试使用glyphicons,他们就不会出现.所以我试着像这样修改elixir文件:

    elixir(function(mix) {

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

});

fonts文件夹在public/css/fonts下复制,但没有显示图标.我在这里错过了什么？任何线索？

在我的app.css中,路径似乎是正确的,例如:

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

Answer 1

新安装的laravel 5.2我遇到了同样的问题.我所做的只是检查浏览器中的请求路径:

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

所以我刚刚添加到gulp.js:

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

然后在终端:

gulp

这对我有用!

Answer 2

你应该在你app.scss 之前$icon-font-path正确包含bootstrap文件集变量值,可能在你的情况下它应该是:

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

Answer 3

这对我在Windows上的Laravel 5.3中起了作用

1. 首先确保您使用的是NodeJS软件包的最新版本(v6.7.0)

   点击网址https://nodejs.org/en/download/current/上的"当前最新功能"标签

2. 跑 npm install

3. 修改文件gulpfile.js以包含以下内容:

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

4. 跑gulp:

   gulp
   

5. 而已.

Answer 4

更新的答案，我现在以更好的方式实现了这一点，类似于最上面的答案。在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";