Fatal编程技术网

Twitter bootstrap 与sass引导集成不显示图标

twitter-bootstrap laravel fonts sass

Twitter bootstrap 与sass引导集成不显示图标,twitter-bootstrap,laravel,fonts,sass,laravel-elixir,Twitter Bootstrap,Laravel,Fonts,Sass,Laravel Elixir,我使用本教程将引导集成到我的项目中： 这将在css文件夹中放置app.css文件。 但是，如果我尝试使用字形图标，它们不会显示。 所以我试着像这样修改elixir文件： elixir(function(mix) { mix.sass('app.scss') .browserify('app.js') .copy('node_modules/bootstrap-sass/assets/fonts', 'public/css/fonts')

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

这将在css文件夹中放置app.css文件。 但是，如果我尝试使用字形图标，它们不会显示。 所以我试着像这样修改elixir文件：

    elixir(function(mix) {

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

});
字体文件夹被复制到public/css/fonts下，但没有显示任何图标。我错过了什么？有线索吗

在my app.css中，路径似乎正确，例如：

src: url("fonts/bootstrap/glyphicons-halflings-regular.eot");
更新的答案，我现在以一种更好的方式实现了它，类似于上面的答案。在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";
您应该在
app.scss
之前正确地设置引导文件变量
$icon font path
值，在您的情况下可能应该是：

$icon-font-path: '/css/fonts/';
尝试以下方法：

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'));
});
然后加上

mix
//other scripts
.task('fonts')
我对新安装的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
这对我来说是个好办法

如果在刀片模板中使用elixir（）助手，则应将字体文件放入/public/build。作为/public/build/font的结果，“字体”文件夹包含所有字体文件。

这就是我在Windows上的Laravel 5.3中的工作原理

  • 首先确保您使用的是NodeJS包的最新版本（v6.7.0）

    单击URL上的选项卡“当前最新功能”

  • 运行
    npm安装

  • 修改文件
    gulpfile.js
    以包含以下内容：

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

    gulp
  • 就这样

    • Laravel 5.3删除构建

    mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/bootstrap');
    大口喝
  • 查看浏览器的开发人员工具，查看路径
  • 在我的网站上，是public/fonts/glyphicons-halflings-regular.ttf我下载了这些字体并手动将它们放在那里
  • 成功了
      在Laravel 5.4中，我所做的是

      mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/', 'public/fonts/bootstrap');
      在
      resources/assets/sass/_variables.scss
      或
      app.scss

      $icon-font-path: '/fonts/bootstrap/';
      我在使用Laravel5.4时也遇到了同样的问题，结果是我没有运行
      npm安装
      和
      npm运行dev

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

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

      首先，您需要添加
      mix.copy（'node_modules/bootstrap sass/assets/font/bootstrap/'，'public/font/'）
      
在文件末尾的
      webpack.mix.js
      中
      
接下来打开
      resources/assets/sass/_variable.scss
      并编辑
      $icon font path
      值
      
如果您使用的不是homestead，而是一些没有为应用程序定义开发url的lamp stack（您没有设置vhost和changed hosts文件），而是作为子文件夹访问它，例如
      localhost/your_APP/public/
      ，那么您应该设置图标字体路径，如
      

      $icon字体路径：“/YOUR_APP/public/font/”
      
如果你已经为你的应用程序设置了url，你只需要像
      

      $icon字体路径：“/public/font/”
      并重新编译css文件如果一开始没有设置应用程序，那么在将应用程序推到生产环境之前，您应该对此进行更改
      
对于那些不知道如何重新编译css和js文件的人，请遵循以下步骤：
      
1.转到应用程序的根目录并在那里运行bash（gitbash、cmd等）
      
2. <代码>npm安装

      
3. <代码>npm运行脚本制作
      （您有其他可用标志，但我更喜欢制作，因为它缩小了js和css）
      4.祝贺您在Laravel 5.4中重新编译了js和css，只需安装npm依赖项并根据需要在生产或开发中运行npm

      npm install
npm run production
      Laravel将完成其余工作。

      在webpack.config.js集合中：

      publicPath:“../”
      而不是
      resourceRoot

      Bootstrap4不再带有图标

      例如，您可以使用“字体真棒”

      构建您的webpack.mix.js配置

      mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
      安装字体真棒

      npm install @fortawesome/fontawesome-free
      在/resources/sass/app.scss中导入一个或多个样式

      @import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
      现在编译

      npm run production
or
npm run dev
      最后，在布局中引用新的CSS文件

      <link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
      @Chriz74那么您的字体实际位于
      public/css/fonts
      或
      public/css/fonts/bootstrap
      中的什么位置呢？如果在第二个选项中，请尝试使用有效路径更改If。第二个选项中，bootstrapSo尝试使用
      $icon-font-path:'/css/fonts/bootstrap/'；在你的
      app.scss`fileerror的同一开始，这里出现了错误：我尝试使用
      而不是
      @Chriz74，因为当我将CSS文件与elixir混合使用时，我的CSS文件位于
      构建中。因此，当该文件引用字体时，它们是相对于
      build
      文件夹的，而不是
      public
      文件夹的。谢谢，但它已经工作了，错误就在这里：我尝试使用
      而不是
      是否出现任何错误，当您在终端中调用
      gulp
      命令时，通过从目标路径中删除
      build
      对我有效，但对我无效。使用Laravel 5.3和改进的gulpfile。js@BasilMusaLaravel 5.3删除build dirmix.copy（'node_modules/bootstrap sass/assets/font/bootstrap/'，'public/font/bootstrap'）@BasilMusaI使用Laravel5.4，图标不起作用。我检查了我的
      app.css
      文件，发现字体的路径是
      /font/
      。当我手动将此路径编辑为
      。/font
      而不是
      /font
      时，它会起作用。我想不出怎么做t