How to include ui-grid font files into the project

Question

I have been stuck with anjularjs ui-grid, it\'s showing some Chinese symbols in place of icons. After digging about it I get to know I have to use some font-files provided b

Answer 1

In my project i usually use grunt to put fonts files in build/assets directory and vendors files in build/vendor/lib-name directory.

But ui-grid.css have relative path to get font file and doesn't have any mode to configure a different location without modify your css file. But i think that it's not a good idea because then you need to change this file for each vendor update.

So you can setup your grunt to put this particular font with your vendor files too.

This is your build.config.js:

module.exports = {
    ...
    vendor_files: {
        ...
        js: [
            'vendor/angular/bundle.min.js',
            'vendor/angular-ui-grid/ui-grid.min.js',
        ],
        css: [
            'vendor/angular-ui-grid/ui-grid.min.css',
        ],
        uigrid_fonts: [
            'vendor/angular-ui-grid/ui-grid.woff',
            'vendor/angular-ui-grid/ui-grid.ttf',
            'vendor/angular-ui-grid/ui-grid.eot',
            'vendor/angular-ui-grid/ui-grid.svg',
        ],
        ...
    }
    ...
}

Then on your Gruntfile.js you can manage this file:

module.exports = function (grunt) {

    grunt.loadNpmTasks('grunt-contrib-copy');
    //.. other require

    var userConfig = require('./build.config.js');
    var taskConfig = {
        copy: {
            //.. other copy task
            build_vendor_fonts: {
                files: [
                    {
                        src: [ '<%= vendor_files.fonts %>' ],
                        dest: '<%= build_dir %>/assets/fonts/',
                        cwd: '.',
                        expand: true,
                        flatten: true
                    }
                ]
            },
            build_uigrid_font: {
                files: [
                    {
                        src: [ '<%= vendor_files.uigrid_fonts %>' ],
                        dest: '<%= build_dir %>/',
                        cwd: '.',
                        expand: true,
                    }
                ]
            },
            build_vendor_css: {
                files: [
                    {
                        src: [ '<%= vendor_files.css %>' ],
                        dest: '<%= build_dir %>/',
                        cwd: '.',
                        expand: true
                    }
                ]
            },
            build_appjs: {
                files: [
                    {
                        src: [ '<%= app_files.js %>' ],
                        dest: '<%= build_dir %>/',
                        cwd: '.',
                        expand: true
                    }
                ]
            },
            build_vendorjs: {
                files: [
                    {
                        src: [ '<%= vendor_files.js %>' ],
                        dest: '<%= build_dir %>/',
                        cwd: '.',
                        expand: true
                    }
                ]
            }
        },
    };

    grunt.registerTask('build', [
        'clean', 
        'concat:build_css', 
        'copy:build_vendor_fonts', 
        'copy:build_uigrid_font',
        'copy:build_vendor_css', 
        'copy:build_appjs', 
        'copy:build_vendorjs', 
        'index:build'
    ]);

    //..
}