ui-grid symbols issue
Solution 1
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.
Solution 2
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)
Solution 3
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'
]
}
]},
Solution 4
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.
Solution 5
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>
Anup
Updated on June 17, 2022Comments
-
Anup about 2 years
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?
-
Anup over 9 yearsI added .woff & .tff files & included them by
<script>
tag...It gives me error -Uncaught SyntaxError: Unexpected token ILLEGAL
-
Anup over 9 yearsI just added
.woff & .ttf
files..! -
Rahil Wazir over 9 years@Anup You need to add all files because they have been used for cross-browser compatability.
-
Ganesh Vellanki over 9 years@RahilWazir if I have changed the location in css file the icons are not appearing, any concerns?
-
Rahil Wazir over 9 years@VellankiGaneshBabu You need to alter the location inside
ui-grid.min.css
file -
Rahil Wazir almost 9 years@oCcSking Try removing cache and make sure the files is place like this structure
-
oCcSking almost 9 years10x @RahilWazir for the fast reply .. i always clear cache and i take all files from hare
-
Rahil Wazir almost 9 years@oCcSking Inspect your network tab that those fonts are being loaded
-
oCcSking almost 9 years@RahilWazir I do not see them there .. However, I have another font that is not listed there, and still is active
-
Jay over 8 years@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.
-
jb007 over 7 yearsThe fix for me was to manually add ui-grid.woff file to solution
-
Rohit Parte about 6 yearsIn gruntfile.js
-
Srikanth Babu K about 6 yearsWhat is the impact if i omit ui-grid.svg file? as that file is not under MIT license?
-
Manuel Rivera over 5 yearsBut 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 ??? ...
-
Jacob Barnes over 2 yearsWhere did you find these unicode values?
-
Yogesh over 2 years