проблема с символами ui-grid

Я использую AngularJs ui-grid http://ui-grid.info/.

при реализации, я получаю то, что вы можете увидеть в следующих img-В правом углу ячейки вместо выпадающих символов.

enter image description here

какие файлы включить, чтобы решить эту ошибку?

8 ответов


вам нужно скачать файлы шрифтов:

  • ui-grid.woff
  • ui-grid.eot
  • ui-grid.svg
  • ui-grid.ttf

С здесь. И переместить их, где ваш ui-grid.min.css жизнь.


пожалуйста, включите файл CSS ui-grid таким образом

<link rel="stylesheet" href="/release/ui-grid-unstable.css">

и ommit тег сценария из учебника авторов или Api

<script src="/release/ui-grid-unstable.css"></script>

например (http://ui-grid.info/docs/#/tutorial/102_sorting)


Я просто хотел бы добавить ответ (украдено дословно из panciz) для людей, использующих Grunt, которые хотели бы, чтобы они автоматически копировались. Это должно быть помещено в ваш Gruntfile.js:

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

вы также можете посмотреть на недавно добавленный учебник:http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

Это охватывает, как правильно установить шрифты, и немного проблем съемки.


другой способ решить проблему-изменить класс CSS следующим образом

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

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

попробуйте включить в свой проект:

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

Если вы используете gulp добавьте эту задачу.

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

});

{ развернуть: true, cwd: 'bower_components / angular-ui-grid', src: ['.eot','.svg','.ttf','.вуф'], dest: ' / styles' } добавьте этот код в файл grunt при копировании: { dist: {