angularjs angular @fortawesome/angular-fontawesome - Fontawesome не работает, когда проект построен с ворчанием




8 Answers

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

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 %>'
        }]
    }
}
cli version

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

Но когда я строю проект с хрюканьем, он не работает. Я получаю эту ошибку в консоли: ... / 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/*'
      ]
    }]
  },

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




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

  1. Вы можете удалить шрифт-awesom css из блока 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 шрифтов в виде folder в folder styles помощью дополнительной команды grunt в вашем файле grunt.




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

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



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

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

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




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

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



Если вы работаете с 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 файла tasks/register/compileAssets : https://gist.github.com/robksawyer/fa04a34ea103bead1c61
  5. Обновите файл tasks/config/copy.js по https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f : https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f



У меня была такая же проблема. Я посмотрел файл 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». Возможно, как и я, вы не используете SASS или LESS для стилизации. Поэтому ни один стиль не добавляется для шрифтов. Я изменил 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"
  ]
}

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

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




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

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




Related