Fontawesome nie działa, gdy projekt jest zbudowany z grunt

Jeśli używasz SASS w swoim projekcie, znalazłem prostszy sposób, który nie wymaga zmiany pliku grunt, jeśli ktoś jest zainteresowany:

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

Zasadniczo zawierać te 2 linie na górze głównej.plik scss i czcionki powinny działać.

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

Jeśli używasz zestawu zadań complete grunt od yeoman, to useminPrepare zadanie buduje kombinowany arkusz stylów ze wszystkich arkuszy stylów, które umieściłeś w komentarzu build:css - tak jak ty. (Zobacz https://github.com/yeoman/grunt-usemin aby uzyskać dodatkowe informacje) po zakończeniu procesu budowania ten plik-nieco jak " vendor.234243.css " jest kopiowany do folderu style. Dlatego ścieżka dla czcionki nie jest już ważna. Istnieją co najmniej 2 możliwości rozwiązania tego problemu:

1. Możesz usunąć czcionkę-awesom css z bloku 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. Skopiuj czcionki folder jako rodzeństwo do folderu styles przez dodatkowe zadanie grunt w Twoim pliku Grunt.

Udało mi się rozwiązać ten problem, dodając do kopii następujące elementy.dist.Pliki:

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

Spowoduje skopiowanie czcionek tam, gdzie ich potrzebujesz.

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

Najprostszym sposobem na to jest przejście do własnej bower.json i dodanie overrides właściwości.

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

Będziesz musiał ręcznie kopiować czcionki z folderu fontawesome/fonts twojego folderu app/fonts. Nie wymaga edycji Gruntfile ani SCSS ani czegokolwiek innego.

Moim rozwiązaniem było podejście CDN:

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

Żadna z odpowiedzi nie zadziałała z jakiegoś powodu.

Jak odpowiedzialem powyzej to tez mi sie bardzo dobrze sprawdzilo

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

Oto rozwiązanie: https://stackoverflow.com/a/32128931/3172813

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

Nie wiem, co robiłem źle, ale żadne z proponowanych rozwiązań nie zadziałało. Cokolwiek próbowałem, wydanie produkcji (dystrybucji) nie wyświetla ikon.

Skończyło się na użyciu następujących składników: https://github.com/philya/font-awesome-polymer-icons-generator i https://github.com/philya/font-awesome-polymer-icons

Font-awesome-polymer-icons-generator

Uwaga: python needed

Pozwala na Wygeneruj font-awesome SVG zestaw ikon dla ikon (których używasz) w projekcie.

Jako przykład, powiedzmy, że chcę ikony code, line-chart, github-alt w moich projektach, wtedy wygenerowałbym je w następujący sposób:

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

Generuje plik build/myappname-icons.html. Ten plik musi zostać zaimportowany do mojego komponentu, tak jak każdy inny komponent:

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

Wtedy mogę dostać font-awesome icons jak tak:

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

Tzn. przedrostek zwykłej czcionki-zajebista nazwa z nazwą, którą podałem przy tworzeniu ikony gotowi.

Font-awesome-polymer-icons

Możesz również zaimportować gotowy pełny zestaw ikon font-awesome:

bower install font-awesome-polymer-icons

Należy pamiętać, że dodaje to 300 + KB do rozmiaru dystrybucji, a autor zauważa, że nie jest to zalecane do użytku produkcyjnego.

Jeśli pracujesz z SailsJS i Bower, opracowałem rozwiązanie, które rozwiązuje problemy z czcionkami Fontawesome i Bootstrap.

1. upewnij się, że twoje tasks/config/bower.js wygląda podobnie do: https://gist.github.com/robksawyer/fc274120aef9db278eec
2. dodano moduł npm grunt-remove.
3. Utwórz remove.js plik w tasks/config: https://gist.github.com/robksawyer/2fcf036fdf02436aa90b
4. Update file tasks/register/compileAssets: https://gist.github.com/robksawyer/fa04a34ea103bead1c61
5. zaktualizuj plik tasks/config/copy.js do: https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f

Edytowałem mój Gruntfile.js jak następuje:

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

Miałem ten sam problem. Zajrzałem do bowera.plik json dla font-awesome i znalazłem to:

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

Nie było odniesienia do " font-awesome.css "w tablicy "main". Być może, tak jak ja, nie używasz SASS lub mniej do stylizacji. Więc nie są dodawane style dla font-awesome. Zmodyfikowałem plik json w następujący sposób:

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

Zapisałem i uruchomiłem grunt serve, a teraz pojawiają się moje ikony Font-awesome.

Dla tych, którzy używają Google App Engine, zadziałało dla mnie:

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

Używam mniej więc zaimportowałem font-awesome.less dodając to do mojego pliku main.less.

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

Potem dodałem to do mojego pliku app.yaml.

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

Witam główny problem polega na tym, że pliki czcionek wymagane przez font-awesome css nie zostaną skopiowane po uruchomieniu zadania grunt i możesz uzyskać błąd 404 not found to samo można zweryfikować, jeśli otworzysz tryb programisty chrome i zajrzysz na kartę consoe lub networks. Ten sam problem może wystąpić również w przypadku bootstrap.

Dlatego musimy zmodyfikować zadanie grunt tak, aby wszystkie pliki czcionek zostały skopiowane.

Dodaj oddzielne zadanie kopiowania plików czcionek .

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

Zarejestruj 'copy: fonts' zadanie w grunt.registerTask tak, że zostanie wykonana w czasie budowy.