wake-up-neo.com

Fontawesome funktioniert nicht, wenn das Projekt mit Grunzen erstellt wird

Ich benutze die Schriftartbibliothek fantastisch. Es funktioniert, wenn das Projekt nicht mit grunzen erstellt/erweitert wird. 

Aber wenn ich mit grunt das Projekt baue, funktioniert es nicht. Diese Fehlermeldung wird in der Konsole angezeigt: .../fonts/fontawesome-webfont.woff? V = 4.0.3 404 (nicht gefunden) 

Ich habe das Projekt mit Yeoman gerüstet.

Dies ist mein Hinweis in index.html

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

Irgendwelche Ideen, was falsch sein kann?

Update Ich muss den Ordner/bower_components/font-awesome/fonts nach dist/fonts kopieren. Dies muss in der Grunt-Datei erfolgen. Wahrscheinlich unter den "Kopieroptionen"

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

Ich bin mir aber nicht sicher, wo ich das aufnehmen soll. 

angularjsgruntjsyeomanfont-awesome
64
Joe

Ich hatte das gleiche Problem. Der folgende Code hat mein Problem gelöst.

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

Wenn Sie SASS in Ihrem Projekt verwenden, habe ich einen einfacheren Weg gefunden, bei dem die Grunt-Datei nicht geändert wird, wenn jemand interessiert ist: 

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

Fügen Sie diese beiden Zeilen grundsätzlich in Ihre Datei "main.scss" ein, und die Schriftarten sollten funktionieren.

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

Wenn Sie den kompletten Grunt-Task-Stack von yeoman verwenden, erstellt die useminPrepare-Task aus allen Stylesheets, die Sie in den build:css-Kommentar einfügen, ein kombiniertes Stylesheet. (Weitere Informationen finden Sie unter https://github.com/yeoman/grunt-usemin.) Nach Abschluss des Buildvorgangs wird diese Datei - etwa wie "vendor.234243.css", in den Stilordner kopiert. Deshalb ist der Pfad für Ihre Schriftart nicht mehr gültig. Es gibt mindestens zwei Möglichkeiten, dies zu lösen:

  1. Sie könnten die font-awesom-Datei aus dem build:css-Block entfernen:

    <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. Kopieren Sie die Schriftarten folder als gleichgeordnetes Element in den styles-Ordner, und zwar durch eine zusätzliche Grunt-Aufgabe in Ihrer Gruntfile.

16
michael

Ich konnte das Problem beheben, indem Folgendes zu copy.dist.files hinzugefügt wurde:

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

dadurch werden die Zeichensätze dorthin kopiert, wo Sie sie benötigen.

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

Der einfachste Weg, dies zu tun, ist, zu Ihrem eigenen bower.json zu gehen und eine overrides-Eigenschaft hinzuzufügen.

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

Sie müssen die Schriftarten manuell aus dem Ordner fontawesome/fonts und Ihrem app/fonts-Ordner kopieren. Keine Bearbeitung von Gruntfile oder SCSS oder sonstigem erforderlich.

4
nknj

Meine Lösung bestand in einem CDN-Ansatz:

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

Keine der Antworten funktionierte aus irgendeinem Grund.

1
Aleksejs Spuris

Hier ist die Lösung: https://stackoverflow.com/a/32128931/3172813

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

Wie oben beantwortet, funktionierte das auch sehr gut für mich

 // 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

Hallo, das Hauptproblem ist, dass die von font-awesome css benötigten Zeichensatzdateien nicht kopiert werden, nachdem Sie die Grunt-Aufgabe ausgeführt haben. Möglicherweise wird der 404-Fehler nicht gefunden. Der gleiche Fehler kann überprüft werden, wenn Sie Ihren Chrome-Entwicklermodus öffnen und in den Browser schauen konsoe oder netzwerk tab. Dasselbe Problem kann auch für Bootstrap auftreten.

Daher müssen wir die Grunt-Task so ändern, dass alle Schriftdateien kopiert werden.

Fügen Sie einen separaten Kopierauftrag für Schriftdateien hinzu.

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: { .......
  }
}

Registrieren Sie die Task 'copy: fonts' in grunt.registerTask, damit sie zur Erstellungszeit ausgeführt wird.

0
Jayant Nayak

Ich weiß nicht, was ich falsch gemacht habe, aber keine der vorgeschlagenen Lösungen hat für mich funktioniert. Was auch immer ich versucht habe, die Produktionsversion (Distribution) würde die Icons nicht anzeigen.

Am Ende habe ich folgende Komponenten verwendet: https://github.com/philya/font-awesome-polymer-icons-generator und https://github.com/philya/font-awesome-polymer- Icons

font-Awesome-Polymer-Icons-Generator

Hinweis: Python benötigt

Sie können damit ein SVG-Icon-Set für die von Ihnen verwendeten Icons in Ihrem Projekt erstellen.

Nehmen wir als Beispiel an, ich möchte die Icons code, line-chart, github-alt in meinen Projekten haben, dann würde ich sie wie folgt generieren:

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

Dies erzeugt die Datei build/myappname-icons.html. Diese Datei muss dann wie jede andere Komponente in meine Komponente importiert werden:

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

dann kann ich die font-awesome Icons so bekommen:

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

das heißt, ich füge den Namen des normalen Zeichensatzes mit dem Namen vor, den ich beim Erstellen des Symbolsatzes angegeben habe.

font-awesome-polymer-icons

Sie können auch einfach den vorgefertigten Satz von Symbolen mit fantastischen Schriften importieren:

bower install font-awesome-polymer-icons

Beachten Sie, dass dadurch Ihre Distributionsgröße um mehr als 300 KB erhöht wird. Der Autor weist darauf hin, dass dies nicht für die Verwendung in der Produktion empfohlen wird.

0
Christof

Ich habe meine Gruntfile.js wie folgt bearbeitet:

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

Ich verwende yeoman 1.4.7 und seinen Winkelgenerator. Es ist sehr wichtig, dass Sie copy: app und nicht nur copy: dist task hinzufügen. Wenn Sie nicht copy: app eingeben, wenn Sie grunt serve eingeben, funktioniert es nicht. Mit Kopie: dist erwägen Sie nur grunt serve:dist

0
camposer

Ich hatte das gleiche Problem. Ich habe mir die bower.json-Datei für font-awesome angesehen und folgendes gefunden:

{
  "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"
  ]
}

Es gab keinen Hinweis auf "font-awesome.css" im "main" -Array. Vielleicht verwenden Sie wie ich nicht SASS oder LESS für das Styling. Es werden also keine Stile für font-awesome hinzugefügt. Ich habe die Json-Datei wie folgt geändert:

{
  "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"
  ]
}

Ich habe gerettet und grunzend gedient, und jetzt tauchen meine fantastischen Icons auf.

Hoffe das hilft.

0
Scott

Wenn Sie mit SailsJS und Bower arbeiten, habe ich eine Lösung erarbeitet, mit der Schriftprobleme in Fontawesome und Bootstrap behoben werden. 

  1. Stellen Sie sicher, dass Ihr tasks/config/bower.js ähnlich aussieht: https://Gist.github.com/robksawyer/fc274120aef9db278eec
  2. Npm Modul hinzugefügt grunt-remove .
  3. Erstellen Sie remove.js-Datei in tasks/config: https://Gist.github.com/robksawyer/2fcf036fdf02436aa90b
  4. Aktualisierungsdatei tasks/register/compileAssets: https://Gist.github.com/robksawyer/fa04a34ea103bead1c61
  5. Aktualisieren Sie die Datei tasks/config/copy.js auf: https://Gist.github.com/robksawyer/2aac6d0cdb73bfa8239f
0
Rob Sawyer

Für diejenigen, die Google App Engine verwenden, funktionierte für mich Folgendes:

Zu Gruntfile.js hinzufügen:

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

Ich verwende WENIGER, also importierte ich font-awesome.less, indem ich dies meiner main.less-Datei hinzufügte.

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

Dann fügte ich dies meiner app.yaml-Datei hinzu.

handlers:
- url: /fonts
  static_dir: static/fonts
0
Karl Stulik