[angularjs] Fontawesome не работает, когда проект построен с ворчанием



Answers

Если вы используете SASS в своем проекте, я нашел более простой способ, который не связан с изменением файла grunt, если кому-то интересно:

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

В основном, эти две строки находятся в верхней части файла main.scss, и шрифты должны работать.

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

Я использую шрифт библиотеки шрифтов. Он работает, когда проект не строится / не очищается с ворчанием.

Но когда я строю проект с хрюканьем, он не работает. Я получаю эту ошибку в консоли: ... / fonts / fontawesome-webfont.woff? V = 4.0.3 404 (не найдено)

Я запустил проект с йоменом.

Это мой ref в index.html

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

Любые идеи, что может быть неправильным?

Обновление Мне нужно скопировать папку / bower_components / font-awesome / fonts в dist / fonts. Это нужно сделать в файле grunt. Вероятно, под вариантами «копировать»

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

Но я не уверен, где это включить.




Как уже было сказано выше, для меня тоже очень хорошо работало

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



Для тех, кто использует Google App Engine , для меня работало следующее:

Добавить в 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' 
      }
    ]
  }
}

Я использую LESS, поэтому я импортировал font-awesome.less , добавив это в свой файл main.less .

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

Затем я добавил это в свой файл app.yaml .

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



Я отредактировал свой файл Gruntfile.js следующим образом:

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

Я использую yeoman 1.4.7 и его угловой генератор. Очень важно добавить копию: приложение, а не только копию: dist task (как было предложено выше). Если вы не включаете приложение copy: при входе в grunt serve это не сработает. С копией: dist вы только рассматриваете grunt serve:dist




Я не знаю, что я делаю неправильно, но ни один из предлагаемых решений не работал для меня. Независимо от того, что я пробовал, выпуск (распространение) не отображал значки.

В итоге я использовал следующие компоненты: https://github.com/philya/font-awesome-polymer-icons-generator и https://github.com/philya/font-awesome-polymer-icons

шрифт-удивительная-полимерно-иконка-генератор

Примечание: требуется python

Это позволяет вам создавать шрифт-удивительный набор значков SVG для значков (вы используете) в своем проекте.

Например, я хочу, чтобы в моих проектах был code, line-chart, github-alt значка code, line-chart, github-alt , тогда я бы сгенерировал их так:

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

Это создает файл build/myappname-icons.html . Затем этот файл необходимо импортировать в мой компонент, как и любой другой компонент:

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

то я могу получить шрифт-awesome иконки так:

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

т.е. я приписываю стандартное имя шрифта, имя которого я давал, когда создавал набор значков.

шрифт-устрашающий-полимерно-иконка

Вы также можете просто импортировать готовый полный набор шрифтов - удивительные значки:

bower install font-awesome-polymer-icons

Имейте в виду, что это добавляет 300 + КБ к вашему размеру распространения, и автор отмечает, что он не рекомендуется для использования в производстве.




Самый простой способ сделать это - перейти на свой собственный bower.json и добавить свойство overrides .

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

Вам придется вручную копировать шрифты из fontawesome/fonts папку вашего app/fonts . Нет редактирования Gruntfile или SCSS или чего-либо еще.




Я смог устранить проблему, добавив следующие файлы copy.dist.files:

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



Related