ui-grid符号问题

Question

我正在使用AngularJS ui-grid http://ui-grid.info/。

实现时，我得到了以下图片中右侧单元格中的下拉符号而非原本应该出现的下拉菜单。

哪些文件需要包含以解决此错误？

- Anup

---

很可能缺少一些字体文件，请检查您的控制台以查看错误。 - sylwester

如果您使用的是 ui-grid - v4.6.6，则需要将 ui-grid.ttf 和 ui-grid.woff 放入 fonts 文件夹中。因此，目录结构应如下所示： ui-grid.min.css fonts # <- 这是一个文件夹 ui-grid.ttf ui-grid.woff - Belter

Answer 1

你需要下载字体文件:

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

从这里下载，并将它们移动到与你的ui-grid.min.css相同的位置。

- Rahil Wazir

---

@Anup，您需要添加所有文件，因为它们已用于跨浏览器兼容性。 - Rahil Wazir

@RahilWazir 如果我在CSS文件中更改位置，那么图标就不会出现，有任何问题吗？ - Ganesh Vellanki

@oCcSking 请尝试清除缓存并确保文件的放置结构像这个结构。 - Rahil Wazir

感谢 @RahilWazir 的快速回复，我总是清除缓存，并从这里获取所有文件。 - oCcSking

我的解决方法是手动将ui-grid.woff文件添加到解决方案中。 - Judy007

Answer 2

请按照以下方式添加ui-grid CSS文件：

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

忽略作者教程或API中的脚本标记。

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

例如（http://ui-grid.info/docs/#/tutorial/102_sorting）

- Felix

Answer 3

我想补充一下这个答案（从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'
                    ]
            }
    ]},

- Adam Plocher

Answer 4

你可能还想看一下最近添加的教程：http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation 这篇文章介绍了如何正确安装字体以及一些疑难解答。

- PaulL

Answer 5

另一种解决方法是将CSS类修改如下

.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;
}

- Yogesh

---

你在哪里找到这些Unicode值的？ - Interesting

https://www.htmlsymbols.xyz/unicode - Yogesh

Answer 6

尝试在您的项目中包含以下内容：

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

- Fabien Thetis

Answer 7

如果您正在使用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

});

- Matt

Answer 8

{ expand: true, cwd: 'bower_components/angular-ui-grid', src: ['.eot', '.svg', '.ttf', '.woff'], dest: '<%= yeoman.dist %>/styles' } 将此代码添加到Grunt文件的copy：{ dist: {

- Rohit Parte

---

In gruntfile.js - Rohit Parte

Answer 9

为了帮助大家避免头疼的问题，我在这里添加了这个答案。我曾经遇到过这个问题，并尝试了所有能找到的步骤。然而，问题并不是文件位置等，而是我的.woff文件损坏了。我将字体下载到本地机器上，然后通过ftp上传到服务器。不幸的是，服务器上的.woff文件最终处于一个糟糕的状态，并且正在破坏@font-face声明。虽然这个特定的问题没有提到任何控制台警告/错误，但它们将匹配通过将字体添加到grunt/gulp等解决的问题。

我不记得Chrome中的错误，但在Firefox中是：

downloadable font: rejected by sanitizer

因此，如果您已经尝试了所有方法，但似乎什么都不起作用，请检查字体文件是否正确，因为我的FTP无法传输.woff文件，结果出现了相同的韩文字符等问题。

- Interesting

Answer 10

如果您使用 ui-grid - v4.6.6，则需要将 ui-grid.ttf 和 ui-grid.woff 放到文件夹 fonts 中。因此，目录结构应如下所示：

ui-grid.min.css
fonts  # <--  this is a folder
    ui-grid.ttf  # <-- in fonts folder
    ui-grid.woff  # <-- in fonts folder

- Belter

---

但是，如果您从npm安装ui-grid（v4.6.6），则字体文件夹已经存在。自从我升级到新版本以来，我一直遇到这个问题；我检查了node_modules中的angular-ui-grid文件夹，发现字体文件夹已经存在???... - Manuel Rivera