Come includere i file di caratteri della griglia ui nel progetto

Question

Sono stato bloccato con la griglia utente anjularjs, mostra alcuni simboli cinesi al posto delle icone. Dopo averlo scavato, ho capito che devo usare alcuni file di font forniti dal team di ui-grid, ho scaricato i file e li ho inclusi nel mio progetto, ma non riesco a ottenere le immagini e i font corretti delle icone, come includere questi file nel progetto?

Questi sono i nomi dei file che ho scaricato e incluso nel mio progetto:

1 ui-grid.eot 
2 ui-grid.svg 
3 ui-grid.ttf 
4 ui-grid.woff 

Answer 1

ho avuto lo stesso problema, ora è rettificato come segue

ho aggiornato il Ui-griglia con uno più recente versione stabile (v3.0.0-rc.3) o versione unstable (v3.0.0-rc.16).

poi inserire i file del font tutti nella stessa directory come le vostre vite ui-grid.css, come questo

app 
- lib 
    - ui-grid.js 
    - ui-grid.css 
    - ui-grid.eot 
    - ui-grid.svg 
    - ui-grid.ttf 
    - ui-grid.woff 

o

è possibile aprire il CSS e modificare il percorso del file al posizione relativa in

controllo @ font-face di url qui http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

Answer 2

Se installa la griglia ui usando 'bower install' piuttosto che i file dovrebbero essere installati nella loro corretta posizione. Il problema che abbiamo riscontrato è che stiamo usando ui-router, che richiede che tutte le richieste vengano riscritte su index.html. Abbiamo dovuto aggiungere le estensioni dei caratteri alle nostre regole di riscrittura affinché Angular potesse caricarle. Stiamo usando un plugin middleware per l'esecuzione locale. Su server Apache/Nginx il concetto è lo stesso.

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

Answer 3

sto usando Gulp e ho aggiunto un compito fonts:dev da aggiungere come un dep al mio compito serve:

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/')); 
    }); 

Questo risolto per me. Più contesto here.

Answer 4

sto usando Grunt ho dovuto aggiungere

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

al Gruntfile.js Per copiare i ui-grid font nella directory style.

Answer 5

So che è un po 'tardi ma voglio solo condividere la mia risposta. Uso Bower per installare ui-grid e gruntjs per caricare i file. È quasi la stessa cosa con la risposta Panciz, ma cambiala in *.{ttf,woff,eot,svg} per ottenere tutti i file di font necessari senza specificarli.

aggiungere questo in copia:

copy: { 
    dist: { 
    files: [ 
     //other files here 
     , { 
      expand: true, 
      flatten: true, 
      cwd: '<%= yeoman.client %>', 
      dest: '<%= yeoman.dist %>/public/app', //change destination base to your file structure 
      src: [ 
      '*.{ttf,woff,eot,svg}', 
      'bower_components/angular-ui-grid/*', 
      ] 
     } 
    ] 
    } 
} 

Answer 6

Con Gulp è possibile aggiungere questo compito in un file build.js

gulp.task('copyfonts', function() { 
    gulp.src('./bower_components/angular-ui-grid/**/*.{ttf,woff}') 
    .pipe(gulp.dest(path.join(conf.paths.dist, '/styles/'))); 

}); 

Answer 7

Nel mio progetto io di solito uso grugnito di mettere i file font nella directory e build/assets i file dei venditori nella directory build/vendor/lib-name.

Ma ui-grid.css ha percorso relativo per ottenere il file di font e non ha alcuna modalità per configurare una posizione diversa senza modificare il file css. Ma penso che non sia una buona idea, perché allora è necessario modificare questo file per ogni aggiornamento del fornitore.

Così puoi impostare il tuo grunt per mettere questo particolare tipo di carattere anche con i file del tuo fornitore.

questa è la tua 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', 
     ], 
     ... 
    } 
    ... 
} 

Poi sul Gruntfile.js è possibile gestire questo 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' 
    ]); 

    //.. 
} 

Answer 8

Praticamente la stessa risposta come Panciz e Vicruz, ma ho specificato un po 'gli indici rilevanti diversamente:

copy: { 
    dist: { 
     files: [{ 
      // other files here... 
     }, { 
      expand : true, 
      cwd : 'bower_components/angular-ui-grid', 
      dest : '<%= yeoman.dist %>/styles', 
      src : ['*.eot','*.svg','*.ttf','*.woff'] 
     }] 
    },