Broken Bootstrap glyphicons font paths in vendor.css created by grunt build task

[pranavpr]

The font path for bootstrap glyphicons is broken in vendor.css created in dist folder by grunt build task. Issue can be replicated by steps below:

1. Generate angular application without sass option but with Bootstrap
2. Run grunt build command
3. Navigate to dist/styles and open vendor.css
4. Search for ttf. You can see that the font paths are absolute bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf

The correct path should be ../fonts/glyphicons-halflings-regular.ttf

[AquilaSagitta]

Also need to change .woff and .woff2

[eddiemonge]

The fonts from bootstrap shouldnt be in styles/fonts. They should be in bower_components/bootstrap/dist/fonts

[pranavpr]

@eddiemonge I am taking about the case after building. After running grunt build, fonts are copied to dist/fonts folder. However the vendor.css file generated still refers to old path for fonts, not the new path i.e. dist/fonts.

[eddiemonge]

Again, the bootstrap fonts should not be copied to styles/fonts so the vendor.css reference should not change. Any font files you manually put in app/styles/fonts should get copied over and the references in app/main/css should get updated with the revved versions.

[vipex]

I've the same issue, compiled vendor.css target the bower_components directory instead ../fonts.

I've solved adding rebase:false to cssmin, like this:

cssmin: {
   options: {
     rebase: false
   },
   dist: {
     files: {
       '<%= yeoman.dist %>/styles/main.css': [
         '.tmp/styles/{,*/}*.css'
       ]
     }
   }
},

[pranavpr]

@eddiemonge Sorry, fonts are not getting copied in to styles/fonts folder. Fonts are getting copied to dist/fonts folder. However vendor.css still referring to old path instead of dist/fonts path for Bootstrap fonts.

@vipex My Gruntfile.js has cssmin task commented out. I am using default usemin task to minify the css.

[icaliman]

Same issue here

[danielabar]

I had the same problem, adding rebase: false to cssmin fixed it. Thanks @vipex for the solution!

[orendan]

I experienced a similar symptom when running Angular generator with all the default settings (includes Sass and Bootstrap). The problematic references are then in the dist/styles/main...css file (rather than the vendor.css file).

rebase: false resolved it for me too. Hopefully this does not introduce other side effects I'm not aware of.

[dovy]

Solved this for long-term.

First install grunt-text-replace: npm install grunt-text-replace --save-dev

Then add this anywhere:

            // replace the font file path
            replace: {
                dist: {
                    src: ['<%= yeoman.dist %>/styles//*.css'],
                    overwrite: true,                 // overwrite matched source files
                    replacements: [{
                        from: '../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/',
                        to: '../fonts/'
                    }]
                }
            },

update the build task:

grunt.registerTask(
        'build', [
            'clean:dist',
            'wiredep',
            'useminPrepare',
            'concurrent:dist',
            'autoprefixer',
            'concat',
            'ngAnnotate',
            'copy:dist',
            'cdnify',
            'cssmin',
            'uglify',
            'filerev',
            'usemin',
            'htmlmin',
            'replace:dist'
        ]
    );

And LASTLY, the following change. From:

        {
          expand: true,
          cwd: '.',
          src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
          dest: '<%= yeoman.dist %>'
        }

to:

                        {
                            expand: true,
                            cwd: '.',
                            flatten: true,
                            src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
                            dest: '<%= yeoman.dist %>/fonts/'
                        }

The only issue is this doesn't take into account filerev at all, so there's caching problems with fonts. At least this is better than it not working at all! ;)

[eddiemonge]

Try updating to 0.12.1 and see if that fixes it

[dovy]

Using 0.12.1 and seems to work for grunt serve, but grunt build has an issue.

Fixed it by doing the following:

Added (was previously there):

cssmin: {
                dist: {
                    files: {
                        '<%= yeoman.dist %>/styles/main.css': [
                            '.tmp/styles/{,*/}*.css'
                        ]
                    }
                }
            },

and changing the cssmin in the build task to cssmin:dist.

Then it works like a dream again.

[dovy]

Well, now loading the icons in the bower_components under dist. That's a bit odd.

[LunarDevelopment]

Any time frame on a fix for this?

its very annoying having fonts break when building..

[fschoell]

The fonts are still placed under dist/bower_components/bootstrap-sass-official/assets/fonts/bootstrap, that doesn't feel to be the right way imo. And it's a problem when you are using icons from different packages. I had this problem as I use bootstrap as well as fonts-awesome.

Solved this issue by setting the icon-font-path to ../fonts/, added this to my Gruntfile:

copy: {
  // ...
  fonts: {
    expand: true,
    flatten: true,
    cwd: '.',
    src: ['bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*', 'bower_components/font-awesome/fonts/*'],
    dest: '.tmp/fonts/',
    filter: 'isFile'
  }
}

and then added copy:fonts to my grunt serve task.

This works for grunt build if the font files are placed in dist/fonts/. And it works for grunt serve as it places the font files in .tmp/fonts while the css file is placed in .tmp/styles.

[ryanburnett]

@fschoell Any chance you can post your full Gruntfile.js?

Also, which file did you set your icon-font-path to ../fonts/?

Thank you!

[azanebrain]

A combination of @dovy and @fschoell 's suggestions of copying the files from dist/bower_components/... to dist/fonts and search-replacing the path in the compiled CSS worked for me. Note that grunt-text-replace requires grunt.loadNpmTasks('grunt-text-replace'); in the gruntfile before the grunt.registerTask, and to run multiple replacements you'll need something along the lines of:

// Replace the font file path
replace: {
    dist: {
        src: ['<%= yeoman.dist %>/styles/*.css'],
        overwrite: true,                 // overwrite matched source files
        replacements: [
          {
            from: '../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/',
            to: '../fonts/'
          },
          {
            from: '/bower_components/font-awesome/fonts',
            to: '../fonts'
          }
        ]
    }
},