laravel sass bootstrap 集成未显示字形

glyphicons not showing with sass bootstrap integration

提问by Chriz74

I used this tutorial to integrate bootstrap in my project:

我使用本教程将引导程序集成到我的项目中：

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

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:

这会在 css 文件夹中放置一个 app.css 文件。但是，如果我尝试使用字形，它们就不会出现。所以我尝试像这样修改 elixir 文件：

    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?

字体文件夹被复制到 public/css/fonts 下，但没有显示图标。我在这里缺少什么？有什么线索吗？

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

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

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

回答by halfred

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 :

我在全新安装 Laravel 5.2 时遇到了同样的问题。我所做的只是检查了浏览器中的请求路径：

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

so I just added to gulp.js this :

所以我只是在 gulp.js 中添加了这个：

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

and afterwards in terminal :

然后在终端：

gulp

That did the trick for me!

这对我有用！

回答by Marcin Nabia?ek

You should in your app.scssbeforeincluding bootstrap file set variable $icon-font-pathvalue correctly, probably in your case it should be:

您应该在包含引导文件app.scss之前$icon-font-path正确设置变量值，可能在您的情况下它应该是：

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

回答by Basil Musa

This is what worked for me in Laravel 5.3 on Windows

这就是在 Windows 上的 Laravel 5.3 中对我有用的方法

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.jsto 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.

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

   单击URL 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
   

5. 就是这样。

回答by Jithin

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

在 Laravel 5.4 中，只需安装 npm 依赖项并根据需要在生产或开发中运行 npm。

npm install
npm run production

Laravel will do the rest.

Laravel 将完成剩下的工作。

回答by Kzy

In Laravel 5.4 what I did is

在 Laravel 5.4 中我所做的是

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

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

并且在resources/assets/sass/_variables.scss或app.scss

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

回答by Votemike

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

我在使用 Laravel 5.4 时遇到了同样的问题 事实证明我没有运行npm install和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.

运行这两个命令后，字体（和字形）就会正确复制到 /public 目录中。无需编辑任何 sass 或构建文件。

回答by Bosko Stupar

For Laravel 5.4

对于 Laravel 5.4

Thisanswer 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.

这个答案并没有完全解决我的问题，但它为我指明了正确的方向。这是我的解决方案，如果您为应用程序定义了 url（使用 homestead 或其他一些 VM/Vagrant/等，或者如果您为应用程序设置了 vhost 和 hosts 文件），或者如果您像我一样，它涵盖了两者，并已安装灯堆栈/xampp/wamp/mapm/etc 并从 apache htdocs sbfolder 进行开发。

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

首先，您需要在文件末尾添加
mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/');
您webpack.mix.js的内容。

Next open up resources/assets/sass/_variable.scssand edit $icon-font-pathvalue.

接下来打开resources/assets/sass/_variable.scss并编辑$icon-font-path值。

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

如果您没有使用 homestead 而是使用一些灯堆栈，其中您没有为您的应用程序定义 dev url（您没有设置 vhost 和更改主机文件），而是您将它作为子文件夹访问，例如，localhost/YOUR_APP/public/那么您应该设置图标字体路径，如
$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!!!

如果你已经为你的应用程序设置了 url，你只需要设置图标字体 paht like
$icon-font-path: "/public/fonts/"并重新编译 css 文件。如果一开始没有设置，您应该在将您的应用程序推送到生产之前更改为它！！！

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

对于那些不知道如何重新编译 css 和 js 文件的人，请按照以下步骤操作：
1. 转到应用程序的根目录并在那里运行 bash（git bash、cmd 等）
2. npm install
3. npm run-script production（您还有其他可用的标志但我更喜欢生产，因为它缩小了 js 和 css）
4. 恭喜你刚刚重新编译了你的 js 和 css

回答by cmac

Laravel 5.3 remove build

Laravel 5.3 删除构建

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

run gulp

运行一口

回答by Dev

• 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!

• 查看浏览器的开发人员工具观察路径。
• 在我的，它是 public/fonts/glyphicons-halflings-regular.ttf 我下载了这些字体，手动将它们放在那里。
• 它奏效了！

回答by cajuc

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.

如果您在刀片模板中使用 elixir() 助手，则应将字体文件放入 /public/build。结果/public/build/fonts，“fonts”文件夹包含所有字体文件。