it-roy-ru.com

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

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

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

Я помогал проекту с Йоманом.

Это моя ссылка в 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/*'
      ]
    }]
  },

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

64
Joe

У меня такая же проблема. Следующий код решил мою проблему.

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

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

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

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

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

Если вы используете полный стек заданий grunt от yeoman, то задача useminPrepare создает комбинированную таблицу стилей из всех таблиц стилей, которые вы добавили в комментарий build:css, как и вы. (см. https://github.com/yeoman/grunt-usemin для получения дополнительной информации). После завершения процесса сборки этот файл - что-то вроде «vendor.234243.css» копируется в папку стилей. Вот почему путь к вашему шрифту больше не действителен. Есть как минимум 2 возможности решить эту проблему:

  1. Вы можете удалить css font-awesom из блока 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. Скопируйте шрифты folder в качестве родственного элемента в папку styles, выполнив дополнительное задание в файле gruntfile.

16
michael

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

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

это скопирует шрифты туда, где они вам нужны.

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

Самый простой способ сделать это - перейти к своему собственному 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 или что-либо еще.

4
nknj

Мое решение состояло в том, чтобы пойти с подходом CDN:

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

Ни один из ответов не работал по какой-то причине.

1
Aleksejs Spuris

Вот решение: https://stackoverflow.com/a/32128931/3172813

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

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

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

Привет, главная проблема в том, что файлы шрифтов, требуемые font-awesome css, не копируются после запуска задачи grunt, и вы можете получить ошибку 404 not found. То же самое можно проверить, если вы откроете режим разработчика Chrome и посмотрите в вкладка консо или сети. Та же проблема может возникнуть и при начальной загрузке.

Следовательно, нам нужно изменить задачу grunt, чтобы скопировать все файлы шрифтов.

Добавить отдельную задачу копирования для файлов шрифтов.

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

Зарегистрируйте задачу 'copy: fonts' в grunt.registerTask, чтобы она выполнялась во время сборки.

0
Jayant Nayak

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

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

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

Примечание: необходим питон

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

Например, скажем, я хочу иконки 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">

тогда я могу получить удивительные шрифты иконки, например, так:

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

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

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

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

bower install font-awesome-polymer-icons

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

0
Christof

Я отредактировал свой 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 и его угловой генератор. Очень важно добавить copy: app, а не только copy: dist task (как предложено выше). Если вы не включите copy: app при вводе grunt serve, это не сработает. С копией: dist вы рассматриваете только grunt serve:dist

0
camposer

У меня была та же проблема. Я посмотрел файл bower.json для font-awesome и нашел это:

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

Не было никакой ссылки на "font-awesome.css" в массиве "main". Возможно, как и я, вы не используете SASS или LESS для стайлинга. Таким образом, для font-awesome не добавляются стили. Я изменил файл JSON следующим образом:

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

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

Надеюсь это поможет.

0
Scott

Если вы работаете с SailsJS и Bower, я разработал решение, которое устраняет проблемы со шрифтами Fontawesome и Bootstrap. 

  1. Убедитесь, что ваш tasks/config/bower.js выглядит примерно так: https://Gist.github.com/robksawyer/fc274120aef9db278eec
  2. Добавлен модуль npm grunt-remove .
  3. Создайте файл remove.js в tasks/config: https://Gist.github.com/robksawyer/2fcf036fdf02436aa90b
  4. Обновить файл tasks/register/compileAssets: https://Gist.github.com/robksawyer/fa04a34ea103bead1c61
  5. Обновите файл tasks/config/copy.js по адресу: https://Gist.github.com/robksawyer/2aac6d0cdb73bfa8239f
0
Rob Sawyer

Для тех, кто использует 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
0
Karl Stulik