web-dev-qa-db-fra.com

Fontawesome ne fonctionne pas lorsque le projet est construit avec grunt

J'utilise la police de police de police génial. Cela fonctionne lorsque le projet n'est pas construit/modifié avec grunt. 

Mais quand je construis le projet avec grunt, ç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

    <!-- build:css styles/fontawesome.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->

Des idées ce qui peut être faux?

Mise à jour Je dois copier le dossier/bower_components/font-awesome/fonts dans dist/fonts. Cela doit être fait dans le fichier grunt. Probablement sous les options "copier"

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

Mais je ne sais pas trop où inclure ceci. 

angularjsgruntjsyeomanfont-awesome
64
Joe

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 %>'
        }]
    }
}
85
Abdullah

Si vous utilisez SASS dans votre projet, j'ai trouvé un moyen plus simple de ne pas modifier le fichier grunt si quelqu'un est 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 polices devraient fonctionner.

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

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

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

    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- build:css styles/fontawesome.css -->
 this will be processed by useminPrepare 
<!-- endbuild -->

  2. Copiez les polices folder en tant que frères dans le dossier styles par une tâche supplémentaire Grunt dans votre fichier Grunt.

16
michael

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' 
}
7
rantunes

cela copiera les polices 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'
            }]
        },
4
Nijomi

Le moyen le plus simple de procéder consiste à accéder à votre propre bower.json et à ajouter une propriété overrides.

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

Vous devrez copier manuellement les polices du dossier fontawesome/fonts dans votre dossier app/fonts. Aucune édition de Gruntfile ou SCSS ou quoi que ce soit d'autre requis.

4
nknj

Ma solution a été d'aller avec une approche CDN:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

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

1
Aleksejs Spuris

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

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

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'
        }]
      }
1
ssaini

Bonjour, le problème principal est que les fichiers de police requis par font-awesome css ne sont pas copiés après l'exécution de la tâche Grunt et que vous risquez d'obtenir l'erreur 404 non trouvée. La même chose peut être vérifiée si vous ouvrez votre mode développeur Chrome et regardez dans le Conso ou onglet réseaux. Le même problème peut se produire pour bootstrap aswell.

Par conséquent, nous devons modifier la tâche Grunt afin que tous les fichiers de polices soient copiés.

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

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.

0
Jayant Nayak

Je ne sais pas ce que je faisais mal mais aucune des solutions proposées ne fonctionnait pour moi. Quoi que j'ai essayé, la version de production (distribution) n'afficherait pas les icônes.

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- icônes

font-awesome-polymer-icons-generator

Note: python nécessaire

Il vous permet de générer un jeu d’icônes SVG de polices impressionnantes pour les icônes (que vous avez utilisées) de votre projet.

Par exemple, disons que je veux les icônes code, line-chart, github-alt dans mes projets, alors je les générerais comme ceci:

./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 n'importe quel autre composant:

<link rel="import" href="<pathToFile>/myappname-icons.html">

alors je peux obtenir les icones font-awesome comme ceci:

<core-icon icon="myappname:line-chart"></core-icon>

c'est-à-dire que je préfixe le nom normal de font-awesome avec le nom que j'ai donné lors de la création du jeu d'icônes.

font-awesome-polymer-icons

Vous pouvez également simplement importer le jeu complet d’icônes font-awesome pré-construit:

bower install font-awesome-polymer-icons

N'oubliez pas que cela ajoute plus de 300 Ko à la taille de votre distribution et l'auteur note que cela n'est pas recommandé pour une utilisation en production.

0
Christof

J'ai édité mon fichier 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', 'Compile 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 angulaire. Il est très important d'ajouter copy: app et pas seulement copy: dist task (comme suggéré ci-dessus). Si vous n'incluez pas copy: app lorsque vous entrez grunt serve, cela ne fonctionnera pas. Avec copy: dist, vous envisagez uniquement grunt serve:dist

0
camposer

J'avais le même problème. J'ai jeté un coup d'œil 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 à "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 enregistré et exécuté un service de grognement, et maintenant, mes icônes de polices impressionnantes apparaissent.

J'espère que cela t'aides.

0
Scott

Si vous travaillez avec SailsJS et Bower, j'ai mis au point une solution permettant de résoudre les problèmes de polices Fontawesome et Bootstrap. 

  1. Assurez-vous que votre tasks/config/bower.js ressemble à: 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 le fichier tasks/register/compileAssets: https://Gist.github.com/robksawyer/fa04a34ea103bead1c61
  5. Mettez à jour le fichier tasks/config/copy.js en: https://Gist.github.com/robksawyer/2aac6d0cdb73bfa8239f
0
Rob Sawyer

Pour ceux qui utilisent Google App Engine, ce qui suit a 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' 
      }
    ]
  },
  compile_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= compile_dir %>/fonts' 
      }
    ]
  }
}

J'utilise MOINS alors j'ai 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
0
Karl Stulik