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

Answer 1

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

Answer 2

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.

Answer 3

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

});

Answer 4

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.