CODEWITHSUNDEEP
angularjsangular-ui-grid
irfan shafi
irfan shafi

Reputation: 524

How to include ui-grid font files into the project

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 by ui-grid team, I downloaded the files and included them into my project but still m not getting the correct icon images and fonts, how to include these files into the project?

These are the file names which I downloaded and included in my project:

1 ui-grid.eot 
2 ui-grid.svg
3 ui-grid.ttf
4 ui-grid.woff

Upvotes: 22

Views: 16927

Answers (8)

Gerald Scott
Gerald Scott

Reputation: 1

Pretty much the same answer as Panciz and Vicruz, but I specified the relevant directories slightly differently:

copy: {
     dist: {
        files: [{
           // other files here...
        }, {
           expand : true,
           cwd : 'bower_components/angular-ui-grid',
           dest : '<%= yeoman.dist %>/styles',
           src : ['*.eot','*.svg','*.ttf','*.woff']
        }]
     },

Upvotes: 0

jedi
jedi

Reputation: 859

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'
    ]);

    //..
}

Upvotes: 0

arielduarte
arielduarte

Reputation: 536

With Gulp you can add this task into build.js file

gulp.task('copyfonts', function() {
   gulp.src('./bower_components/angular-ui-grid/**/*.{ttf,woff}')
   .pipe(gulp.dest(path.join(conf.paths.dist, '/styles/')));

});

Upvotes: 2

Vicruz
Vicruz

Reputation: 331

I know it's a little bit late but I just want to share my answer. I use bower to install ui-grid and gruntjs to load files. Its almost the same with Panciz answer but change it to *.{ttf,woff,eot,svg} for getting all font files needed without specifying them.

add this in copy: 

copy: {
  dist: {
    files: [
      //other files here
      , {
          expand: true,
          flatten: true,
          cwd: '<%= yeoman.client %>',
          dest: '<%= yeoman.dist %>/public/app', //change destination base to your file structure
          src: [
            '*.{ttf,woff,eot,svg}',
            'bower_components/angular-ui-grid/*',
          ]
        }
    ]
  }
}

Upvotes: 1

Panciz
Panciz

Reputation: 2234

I'm using Grunt I had to add

copy: {
      dist: {
        files: [
           ...
        //font di ui grid
         {
              expand: true,
              flatten: true,
              dest: 'dist/styles/',
              src: ['bower_components/angular-ui-grid/ui-grid.ttf',
                    'bower_components/angular-ui-grid/ui-grid.woff',
                    'bower_components/angular-ui-grid/ui-grid.eot',
                    'bower_components/angular-ui-grid/ui-grid.svg'
                    ]
            }
    ]},

to the Gruntfile.js In order to copy the ui-grid fonts in the style directory.

Upvotes: 9

Jason Swett
Jason Swett

Reputation: 45164

I'm using Gulp and I added a fonts:dev task to be added as a dep to my serve task:

 gulp.task('fonts:dev', function () {
    return gulp.src($.mainBowerFiles())
      .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
      .pipe($.flatten())
      .pipe(gulp.dest(options.tmp + '/serve/fonts/'));
  });

This solved it for me. More context here.

Upvotes: 1

Michael D Johnson
Michael D Johnson

Reputation: 929

If you install ui grid using 'bower install' than the files should be installed in their proper location. The problem we had is that we're using ui-router, which requires all requests to be rewritten to index.html. We had to add the font extensions to our rewrite rules so that Angular could load them. We're using a middleware plugin for running locally. On Apache/Nginx server the concept is the same.

middleware: function (connect) {
        return [
          modRewrite(['!\\.html|\\.js|\\.svg|\\.woff|\\.ttf|\\.eot|\\.css|\\.png$ /index.html [L]']),
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }

Upvotes: 0

Felix
Felix

Reputation: 245

I had the same issue, now it is rectified as follows

I updated the Ui-grid with either latest stable version(v3.0.0-rc.3) or the unstable version(v3.0.0-rc.16).

then place the font files all in the same directory as your ui-grid.css lives, like this

app
- lib
  - ui-grid.js
  - ui-grid.css
  - ui-grid.eot
  - ui-grid.svg
  - ui-grid.ttf
  - ui-grid.woff

or

you can open the CSS and change the file path to the relative location in @font-face url's

check here http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

Upvotes: 12

Related Questions