How to include ui-grid font files into the project

前端 未结 8 664
独厮守ぢ
独厮守ぢ 2021-01-07 19:55

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

相关标签:
8条回答
  • 2021-01-07 20:17

    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

    0 讨论(0)
  • 2021-01-07 20:21

    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.

    0 讨论(0)
  • 2021-01-07 20:22

    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'
        ]);
    
        //..
    }
    
    0 讨论(0)
  • 2021-01-07 20:24

    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)
            ];
          }
    
    0 讨论(0)
  • 2021-01-07 20:34

    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/')));
    
    });
    
    0 讨论(0)
  • 2021-01-07 20:34

    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.

    0 讨论(0)
提交回复
热议问题