twitter-bootstrap ui-grid 符号问题

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26651918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:46:53  来源:igfitidea点击:

ui-grid symbols issue

angularjstwitter-bootstrapangular-ui-gridui-grid

提问by Anup

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

我正在使用 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.

在实现时,我得到了一些你可以在单元格右角的以下 img 中看到的东西,而不是下拉符号。

enter image description here

在此处输入图片说明

Which files to include to solve this bug?

要包含哪些文件来解决此错误?

回答by Rahil Wazir

You need to download the font files:

您需要下载字体文件:

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

from here. And move them where your ui-grid.min.csslives.

这里。并将它们移动到您ui-grid.min.css居住的地方。

回答by Felix

Please include ui-grid CSS file by this way

请通过这种方式包含 ui-grid CSS 文件

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

and ommit the script tag from the Authors Tutorial or Api

并省略作者教程或 Api 中的脚本标签

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

for eg (http://ui-grid.info/docs/#/tutorial/102_sorting)

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

回答by Adam Plocher

I would just like to add this answer(stolen verbatim from panciz) for the folks using Grunt who would like to have these automatically copied. This needs to be placed in your Gruntfile.js:

我只想为使用 Grunt 的人添加这个答案(从 panciz 中窃取的逐字逐字),他们希望自动复制这些答案。这需要放在你的 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'
                    ]
            }
    ]},

回答by PaulL

You may also want to look at a recently added tutorial: http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

您可能还想查看最近添加的教程:http: //ui-grid.info/docs/#/tutorial/116_fonts_and_installation

This covers how to install the fonts correctly, and a little bit of trouble shooting.

这包括如何正确安装字体,以及一些故障排除。

回答by Yogesh

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

另一种解决问题的方法是修改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;
}

回答by Fabien Thetis

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>

回答by Rohit Parte

{ expand: true, cwd: 'bower_components/angular-ui-grid', src: ['.eot', '.svg', '.ttf', '.woff'], dest: '<%= yeoman.dist %>/styles' } add this code to grunt file at copy: { dist: {

{ expand: true, cwd: 'bower_components/angular-ui-grid', src: [' .eot', '.svg', ' .ttf', '.woff'], dest: '<%= yeoman.dist %>/styles' } 在复制时将此代码添加到 grunt 文件中:{ dist: {

回答by Belter

If you use ui-grid - v4.6.6, you need to put ui-grid.ttfand ui-grid.woffinto folder fonts. So the structure of directory will looks like this:

如果你使用ui-grid - v4.6.6,你需要把ui-grid.ttfui-grid.woff成文件夹fonts。所以目录的结构将如下所示:

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

回答by Matt

If you are using gulp, add this task.

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

});