I have been stuck with anjularjs ui-grid, it\'s showing some Chinese symbols in place of icons. After digging about it I get to know I have to use some font-files provided b
I had the same issue, now it is rectified as follows
I updated the Ui-grid with either latest stable version(v3.0.0-rc.3) or the unstable version(v3.0.0-rc.16).
then place the font files all in the same directory as your ui-grid.css lives, like this
app
- lib
- ui-grid.js
- ui-grid.css
- ui-grid.eot
- ui-grid.svg
- ui-grid.ttf
- ui-grid.woff
or
you can open the CSS and change the file path to the relative location in @font-face url's
check here http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation
I'm using Grunt I had to add
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'
]
}
]},
to the Gruntfile.js
In order to copy the ui-grid
fonts in the style
directory.
In my project i usually use grunt to put fonts files in build/assets
directory and vendors files in build/vendor/lib-name
directory.
But ui-grid.css have relative path to get font file and doesn't have any mode to configure a different location without modify your css file. But i think that it's not a good idea because then you need to change this file for each vendor update.
So you can setup your grunt to put this particular font with your vendor files too.
This is your build.config.js
:
module.exports = {
...
vendor_files: {
...
js: [
'vendor/angular/bundle.min.js',
'vendor/angular-ui-grid/ui-grid.min.js',
],
css: [
'vendor/angular-ui-grid/ui-grid.min.css',
],
uigrid_fonts: [
'vendor/angular-ui-grid/ui-grid.woff',
'vendor/angular-ui-grid/ui-grid.ttf',
'vendor/angular-ui-grid/ui-grid.eot',
'vendor/angular-ui-grid/ui-grid.svg',
],
...
}
...
}
Then on your Gruntfile.js
you can manage this file:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
//.. other require
var userConfig = require('./build.config.js');
var taskConfig = {
copy: {
//.. other copy task
build_vendor_fonts: {
files: [
{
src: [ '<%= vendor_files.fonts %>' ],
dest: '<%= build_dir %>/assets/fonts/',
cwd: '.',
expand: true,
flatten: true
}
]
},
build_uigrid_font: {
files: [
{
src: [ '<%= vendor_files.uigrid_fonts %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true,
}
]
},
build_vendor_css: {
files: [
{
src: [ '<%= vendor_files.css %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
},
build_appjs: {
files: [
{
src: [ '<%= app_files.js %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
},
build_vendorjs: {
files: [
{
src: [ '<%= vendor_files.js %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
}
},
};
grunt.registerTask('build', [
'clean',
'concat:build_css',
'copy:build_vendor_fonts',
'copy:build_uigrid_font',
'copy:build_vendor_css',
'copy:build_appjs',
'copy:build_vendorjs',
'index:build'
]);
//..
}
If you install ui grid using 'bower install' than the files should be installed in their proper location. The problem we had is that we're using ui-router, which requires all requests to be rewritten to index.html. We had to add the font extensions to our rewrite rules so that Angular could load them. We're using a middleware plugin for running locally. On Apache/Nginx server the concept is the same.
middleware: function (connect) {
return [
modRewrite(['!\\.html|\\.js|\\.svg|\\.woff|\\.ttf|\\.eot|\\.css|\\.png$ /index.html [L]']),
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect().use(
'/app/styles',
connect.static('./app/styles')
),
connect.static(appConfig.app)
];
}
With Gulp you can add this task into build.js file
gulp.task('copyfonts', function() {
gulp.src('./bower_components/angular-ui-grid/**/*.{ttf,woff}')
.pipe(gulp.dest(path.join(conf.paths.dist, '/styles/')));
});
I'm using Gulp and I added a fonts:dev
task to be added as a dep to my serve
task:
gulp.task('fonts:dev', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.tmp + '/serve/fonts/'));
});
This solved it for me. More context here.