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.

enter image description here

Which files to include to solve this bug?

more likely some fonts files are missing check your console for errors — sylwester, Oct 30 '14 at 12:27
If you use `ui-grid - v4.6.6`, you need to put `ui-grid.ttf` and `ui-grid.woff` into folder `fonts`. So the structure of directory will looks like this: `ui-grid.min.css` fonts # <- this is a folder `ui-grid.ttf` `ui-grid.woff` — Belter, Dec 28 '18 at 13:35

score 37 · Accepted Answer · answered Oct 30 '14 at 12:31

37

You need to download the font files:

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

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

answered Oct 30 '14 at 12:31

Rahil Wazir

10,007
11
42
64

I added .woff & .tff files & included them by ` – Anup Oct 30 '14 at 13:06
I just added `.woff & .ttf` files..! – Anup Oct 30 '14 at 13:11
2

@Anup You need to add all files because they have been used for cross-browser compatability. – Rahil Wazir Oct 30 '14 at 13:16
@RahilWazir if I have changed the location in css file the icons are not appearing, any concerns? – Ganesh Vellanki Mar 18 '15 at 08:32
@VellankiGaneshBabu You need to alter the location inside `ui-grid.min.css` file – Rahil Wazir Mar 18 '15 at 09:38
2

@oCcSking Try removing cache and make sure the files is place like [this structure](https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/3.0.0-RC.18-7774d30) – Rahil Wazir Aug 12 '15 at 10:25
1

10x @RahilWazir for the fast reply .. i always [clear cache](http://stackoverflow.com/q/12633425/1509853) and i take all files from [hare](https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/3.0.3) – oCcSking Aug 12 '15 at 10:32
@oCcSking Inspect your network tab that those fonts are being loaded – Rahil Wazir Aug 12 '15 at 10:35
@RahilWazir I do not see them there .. However, I have another font that is not listed there, and still is active – oCcSking Aug 12 '15 at 10:52
@rahilwazir Thanks, should this files be referred in the index.html. I have these files in bower_components but not referring anywhere. And i have the same issue raised by OP at some instances in some envrionment. – Jay Feb 12 '16 at 10:30
1

The fix for me was to manually add ui-grid.woff file to solution – Judy007 Jan 18 '17 at 01:09
What is the impact if i omit ui-grid.svg file? as that file is not under MIT license? – Srikanth Babu K Apr 13 '18 at 08:37

score 6 · Answer 2 · answered Dec 04 '14 at 12:46

Please include ui-grid CSS file by this way

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

and ommit the script tag from the Authors Tutorial or Api

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

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

score 4 · Answer 3 · edited May 23 '17 at 10:30

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:

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

score 2 · Answer 4 · answered Mar 15 '15 at 23:07

2

You may also want to look at a recently added tutorial: 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.

answered Mar 15 '15 at 23:07

PaulL

6,650
3
35
39

score 1 · Answer 5 · answered Aug 17 '16 at 11:42

1

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

answered Aug 17 '16 at 11:42

Yogesh

773
1
8
22

Where did you find these unicode values? – Jacob Barnes Jan 04 '22 at 23:09
1

https://www.htmlsymbols.xyz/unicode – Yogesh Jan 06 '22 at 17:07

score 1 · Answer 6 · answered Nov 29 '16 at 09:25

1

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>

answered Nov 29 '16 at 09:25

Fabien Thetis

1,666
15
11

score 0 · Answer 7 · answered Sep 20 '16 at 14:38

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

});

score 0 · Answer 8 · answered Mar 30 '18 at 08:43

0

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

answered Mar 30 '18 at 08:43

Rohit Parte

3,365
26
26

In gruntfile.js – Rohit Parte Mar 30 '18 at 08:45

score 0 · Answer 9 · answered Dec 28 '18 at 13:38

0

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

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

answered Dec 28 '18 at 13:38

Belter

3,573
5
42
58

But if you install ui-grid (v4.6.6) from npm, the fonts folder is already there. I've been having this issue since I upgraded to a newer version; I check the angular-ui-grid folder in node_modules, and the fonts folder is already there ??? ... – Manuel Rivera Jan 24 '19 at 22:13

score 0 · Answer 10 · answered Jan 05 '22 at 15:33

Adding this answer to hopefully save someone a headache. I had this problem and went through all the steps I could find. However, the problem wasn't file location, etc, my issue is the .woff file was corrupted. I downloaded the fonts to my local machine and ftp'd them to the server. Unfortunately, the .woff on the server ended up in a bad state and was bombing the @font-face declaration. Although this particular problem doesn't mention any console warnings/errors, they will match issues resolved by adding the fonts to grunt/gulp/etc.

I don't recall the error in Chrome, but in Firefox it was:

downloadable font: rejected by sanitizer

So, if you've gone through the hoops and nothing seems to work, check if the font files are correct because my FTP failed for .woff and it resulted in the same Korean characters, etc.

ui-grid symbols issue

10 Answers10

Linked