ui-grid symbols issue

Question

I am using AngularJs ui-grid http://ui-grid.info/.

While implementing, I get something which you can see in the following img in right corner of the cell instead of dropdown symbols.

Which files to include to solve this bug?

Answer 1

If you are using gulp, add this task.

gulp.task('styles', function() {

  // Copy font files needed for angular-ui-grid
  gulp.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'
  ])
    .pipe(gulp.dest('dist/styles/'))

  // Other style tasks here

});

Answer 2

Another way to solve the issue is modify the CSS class as follows

.ui-grid-icon-down-dir:before {
  content: '\25bc';
}
.ui-grid-icon-up-dir:before {
  content: '\25b2';
}

.ui-grid-selection-row-header-buttons.ui-grid-row-selected:before{
    content:'\2714' !important;
}
.ui-grid-all-selected:before{
    content:'\2714' !important;
}

Answer 3

Try to include in your project :

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">

<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>