Fontawesome ne fonctionne pas lorsque le projet est construit avec grognement

J’utilise la police de la bibliothèque de fonts génial. Cela fonctionne quand le projet n’est pas construit / aiguisé avec grognement.

Mais quand je construis le projet avec grognement, ça ne marche pas. Je reçois cette erreur dans la console: … / fonts / fontawesome-webfont.woff? V = 4.0.3 404 (introuvable)

J’ai échafaudé le projet avec yeoman.

Ceci est ma référence dans index.html

   

Des idées ce qui peut être faux?

Mise à jour J’ai besoin de copier le dossier / bower_components / font-awesome / fonts sur dist / fonts. Cela doit être fait dans le fichier grunt. Probablement sous les options “copie”

 copy: { dist: { files: [{ expand: true, dot: true, cwd: '', dest: '', src: [ '*.{ico,png,txt}', '.htaccess', 'bower_components/**/*', 'images/{,*/}*.{gif,webp}', 'styles/fonts/*' ] }, { expand: true, cwd: '.tmp/images', dest: '/images', src: [ 'generated/*' ] }] }, 

Mais je ne sais pas trop où l’inclure.

    J’ai eu le même problème. Le code suivant a résolu mon problème.

     copy: { dist: { files: [{ expand: true, dot: true, cwd: '< %= config.app %>', dest: '< %= config.dist %>', src: [ '*.{ico,png,txt}', '.htaccess', 'images/{,*/}*.webp', '{,*/}*.html', 'styles/fonts/{,*/}*.*' ] },{ expand: true, dot: true, cwd: 'bower_components/bootstrap/dist', // change this for font-awesome src: ['fonts/*.*'], dest: '< %= config.dist %>' }] } } 

    Si vous utilisez SASS dans votre projet, j’ai trouvé un moyen plus simple de ne pas modifier le fichier grunt si quelqu’un était intéressé:

    http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/

    En gros, incluez ces 2 lignes en haut de votre fichier main.scss et les fonts devraient fonctionner.

     $fa-font-path: "/bower_components/font-awesome/fonts/"; @import "font-awesome/scss/font-awesome"; 

    Si vous utilisez la stack de tâches complète de yeoman, la tâche useminPrepare construit une feuille de style combinée à partir de toutes les feuilles de style que vous avez useminPrepare dans la build:css comment – comme vous le faites. (Voir https://github.com/yeoman/grunt-usemin pour plus d’informations) Une fois le processus de construction terminé, ce fichier – un peu comme “vendor.234243.css” est copié dans le dossier des styles. C’est pourquoi le chemin de votre police n’est plus valide. Il y a au moins 2 possibilités pour résoudre ce problème:

    1. Vous pouvez supprimer le script font-awesom de la build:css bloc build:css :

         this will be processed by useminPrepare  
    2. Copiez le folder fonts en tant que frère dans le dossier de styles par une tâche supplémentaire grunt dans votre fichier grunt.

    J’ai pu résoudre le problème en ajoutant ce qui suit à copy.dist.files:

     { expand: true, flatten: true, src: 'bower_components/components-font-awesome/fonts/*', dest: 'dist/fonts' } 

    Cela copiera les fonts là où vous en avez besoin.

     copy: { dist: { files: [{ expand: true, dot: true, cwd: '< %= yeoman.app %>', dest: '< %= yeoman.dist %>', src: [ '*.{ico,png,txt}', '.htaccess', 'images/{,*/}*.webp', '{,*/}*.html', 'styles/fonts/{,*/}*.*' ] }, { expand: true, dot: true, cwd: 'app/bower_components/fontawesome/fonts/', src: ['*.*'], dest: '< %= yeoman.dist %>/fonts' }] }, 

    La méthode la plus simple consiste à accéder à votre propre bower.json et à append une propriété de overrides .

     { "name": "xxx", "version": "xxx", "dependencies": { ..., "fontawesome": "~4.0.3" }, "devDependencies": { ..., }, "overrides": { "fontawesome": { "main": [ "./css/font-awesome.css" ] } } } 

    Vous devrez copier les fonts du dossier fontawesome/fonts votre dossier app/fonts manuellement. Aucune édition de Gruntfile ou Gruntfile ou de toute autre chose requirejse.

    Ma solution consistait à adopter une approche CDN:

      

    Aucune des réponses n’a fonctionné pour une raison quelconque.

    Comme répondu ci-dessus, celui-ci a très bien fonctionné pour moi aussi

      // Copies remaining files to places other tasks can use copy: { dist: { files: [{ expand: true, dot: true, cwd: '< %= yeoman.app %>', dest: '< %= yeoman.dist %>', src: [ '*.{ico,png,txt}', '.htaccess', '*.html', 'scripts/components/{,*/}*.html', 'images/{,*/}*.{webp,png,jpg,jpeg,gif}', 'fonts/*', 'styles/fonts/{,*/}*.*', 'services/{,*/}*.json', 'services/mocks/{,*/}*.json' ] }, { expand: true, cwd: '.tmp/images', dest: '< %= yeoman.dist %>/images', src: ['generated/*'] }, { expand: true, cwd: '.tmp/concat/scripts', dest: '< %= yeoman.dist %>/scripts', src: '{,*/}*.js' }, { expand: true, cwd: '.tmp/concat/styles', dest: '< %= yeoman.dist %>/styles', src: '{,*/}*.css' }, { expand: true, cwd: '< %= yeoman.app %>', src: 'styles/Bootstrap/fonts/bootstrap/*', dest: '< %= yeoman.dist %>' }, { expand: true, cwd: 'bower_components/font-awesome/fonts/', src: ['*.*'], dest: '< %= yeoman.dist %>/fonts' }] } 

    Voici la solution: https://stackoverflow.com/a/32128931/3172813

     { expand: true, cwd: '< %= yeoman.app %>/bower_components/font-awesome', src: 'fonts/*', dest: '< %= yeoman.dist %>' } 

    Je ne sais pas ce que je faisais mal, mais aucune des solutions proposées n’a fonctionné pour moi. Quoi que j’ai essayé, la version de production (dissortingbution) n’affiche pas les icons.

    J’ai fini par utiliser les composants suivants: https://github.com/philya/font-awesome-polymer-icons-generator et https://github.com/philya/font-awesome-polymer-icons

    font-awesome-polymer-icons-generator-font

    Note: python nécessaire

    Il vous permet de générer une icône SVG impressionnante pour les icons (que vous avez utilisées) dans votre projet.

    À titre d’exemple, disons que je veux le code, line-chart, github-alt icons code, line-chart, github-alt dans mes projets, puis je les générerais comme suit:

     ./makefaicons.py myappname code line-chart github-alt 

    Cela génère le fichier build/myappname-icons.html . Ce fichier doit ensuite être importé dans mon composant comme tout autre composant:

      

    alors je peux obtenir les icons font-awesome comme ça:

      

    c’est-à-dire que je préfixe le nom normal de la police avec le nom que j’ai donné lorsque j’ai créé le jeu d’icons.

    font-awesome-polymer-icons

    Vous pouvez également importer l’ensemble complet d’icons prédéfinies:

     bower install font-awesome-polymer-icons 

    Gardez à l’esprit que cela ajoute 300 Ko à votre taille de dissortingbution et l’auteur note qu’il n’est pas recommandé pour une utilisation en production.

    Si vous travaillez avec SailsJS et Bower, j’ai mis au point une solution qui corrige les problèmes de fonts Fontawesome et Bootstrap.

    1. Assurez-vous que vos tasks/config/bower.js ressemblent à: https://gist.github.com/robksawyer/fc274120aef9db278eec
    2. Ajout du module npm grunt-remove .
    3. Créez le fichier remove.js dans tasks/config : https://gist.github.com/robksawyer/2fcf036fdf02436aa90b
    4. Mettre à jour les tasks/register/comstackAssets fichier tasks/register/comstackAssets : https://gist.github.com/robksawyer/fa04a34ea103bead1c61
    5. Mettez à jour le fichier tasks/config/copy.js à: https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f

    J’ai édité mon Gruntfile.js comme suit:

     //... copy: { dist: { files: [//... { expand: true, dot: true, cwd: 'bower_components/font-awesome/fonts/', src: ['*.*'], dest: '< %= yeoman.dist %>/fonts' }] }, app: { files: [{ expand: true, dot: true, cwd: 'bower_components/font-awesome/fonts/', src: ['*.*'], dest: '< %= yeoman.app %>/fonts' }] }, //... } //... grunt.registerTask('serve', 'Comstack then start a connect web server', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'connect:dist:keepalive']); } grunt.task.run([ 'clean:server', 'wiredep', 'copy:app', // Added this line 'concurrent:server', 'autoprefixer:server', 'connect:livereload', 'watch' ]); }); 

    J’utilise yeoman 1.4.7 et son générateur angular. Il est très important d’append une copie: app et pas seulement copier: dist tâche (comme suggéré ci-dessus). Si vous n’incluez pas la copie: l’application lorsque vous entrez dans le grunt serve pas. Avec copie: dist, vous ne considérez que le grunt serve:dist

    J’avais le même problème. J’ai jeté un coup d’oeil au fichier bower.json pour font-awesome et j’ai trouvé ceci:

     { "name": "font-awesome", "description": "Font Awesome", "keywords": [], "homepage": "http://fontawesome.io", "dependencies": {}, "devDependencies": {}, "license": ["OFL-1.1", "MIT", "CC-BY-3.0"], "main": [ "less/font-awesome.less", "scss/font-awesome.scss" ], "ignore": [ "*/.*", "*.json", "src", "*.yml", "Gemfile", "Gemfile.lock", "*.md" ] } 

    Il n’y avait aucune référence au “font-awesome.css” dans le tableau “principal”. Peut-être, comme moi, vous n’utilisez pas SASS ou LESS pour le style. Donc, aucun style n’est ajouté pour font-awesome. J’ai modifié le fichier json comme suit:

     { "name": "font-awesome", "description": "Font Awesome", "keywords": [], "homepage": "http://fontawesome.io", "dependencies": {}, "devDependencies": {}, "license": ["OFL-1.1", "MIT", "CC-BY-3.0"], "main": [ "less/font-awesome.less", "scss/font-awesome.scss", "css/font-awesome.css", "fonts/fontawesome-webfont.tff", "fonts/fontawesome-webfont.woff", "fonts/fontawesome-webfont.woff2" ], "ignore": [ "*/.*", "*.json", "src", "*.yml", "Gemfile", "Gemfile.lock", "*.md" ] } 

    J’ai sauvé et couru le service grognon, et maintenant mes icons impressionnantes font leur apparition.

    J’espère que cela t’aides.

    Pour ceux qui utilisent Google App Engine , les éléments suivants ont fonctionné pour moi:

    Ajouter à Gruntfile.js :

     copy: { build_font_awesome: { files: [ { expand: true, flatten: true, src: 'vendor/components-font-awesome/fonts/*', dest: '< %= build_dir %>/fonts' } ] }, comstack_font_awesome: { files: [ { expand: true, flatten: true, src: 'vendor/components-font-awesome/fonts/*', dest: '< %= compile_dir %>/fonts' } ] } } 

    J’utilise LESS, j’ai donc importé font-awesome.less en l’ajoutant à mon fichier main.less .

     @import '../../vendor/components-font-awesome/less/font-awesome.less'; 

    Ensuite, j’ai ajouté ceci à mon fichier app.yaml .

     handlers: - url: /fonts static_dir: static/fonts 

    Salut le principal problème est que les fichiers de fonts requirejs par font-awesome css ne sont pas copiés après avoir exécuté la tâche grunt et vous pouvez obtenir 404 erreur non trouvée, la même chose peut être vérifiée si vous ouvrez votre mode développeur chrome et regardez dans le onglet consoe ou réseaux. Le même problème peut se produire pour bootstrap aussi.

    Il est donc nécessaire de modifier la tâche pour que tous les fichiers de fonts soient copiés.

    Ajouter une tâche de copie séparée pour les fichiers de police.

     copy: { dist: { ..... }, fonts: { expand: true, flatten: true, cwd: '.', src: ['bower_components/bootstrap/fonts/*', 'bower_components/font-awesome/fonts/*'], dest: '< %= yeoman.dist %>/fonts', filter: 'isFile' }, styles: { ....... } } 

    Enregistrez la tâche ‘copy: fonts’ dans grunt.registerTask afin qu’elle soit exécutée au moment de la construction.