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

Solution 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

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

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

});

Solution 4

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/*',
          ]
        }
    ]
  }
}

Solution 5

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.

View more solutions

Comments

[S. Baggy]

Are those files in the same directory as your ui-grid-unstable.css file? On my setup they are and I don't see these other symbols. I don't recall having to do anything else.

[irfan shafi]

The simple solution to this problem is dont use CDN,s build the files locally into your project.

[Felix]

here the question was user downloaded the files but don't know the relative file path replacement. I had given the answer by mapping your relative path in CSS file

[Felix]

PF answer here. stackoverflow.com/questions/26651918/ui-grid-symbols-issue

[Srikanth Babu K]

What about licensing? Those file are not licensed under MIT (ui-grid.svg for eg.) , Can we use it for commercial purpose?