Font Awesome шрифты не загружаются в Angular после сборки

Я использую Angular 8. Я добавил отличный шрифт в angular.json вот так.

"./node_modules/font-awesome/css/font-awesome.css"

Однако все значки были пустыми (не загружались). Итак, я поместил все файлы с потрясающими шрифтами в папку с ресурсами. Затем я помещаю ссылку на файл css в index.html

  <link rel="stylesheet" href="assets/styles/css/font-awesome.css">

Это все еще не сработало. Итак, я открыл файл font-awesome.css прямо в браузере.

mysite.mymy/assets/styles/css/font-awesome.css

Он действительно открылся в браузере. В файле css есть ссылка на "../fonts/". Как показано ниже:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Итак, я нажал на эту ссылку.

mysite.mymy/assets/styles/fonts/fontawesome-webfont.eot?v=4.7.0

Но это перенаправление на домашнюю страницу. В чем проблема? Иконки не загружаются.


angular css font-awesome ng-build
person joler-botol    schedule 19.04.2020    source источник
comment
Вы используете ng build --prod? И когда он находится в модулях узла, когда вы проверяете пустые поля в консоли разработчика, видите ли вы там какой-либо fontawesome css?   -  person pc_coder    schedule 19.04.2020
comment
Только сборка ng. Да, когда я проверяю пустые поля, появляются потрясающие шрифты css.   -  person joler-botol    schedule 19.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

После финальной версии Angular 2.0 структура проекта Angular2 CLI была изменена - вам не нужны ни файлы поставщика, ни system.js - только webpack. Итак, вы делаете:

  1. npm install font-awesome --save
  2. В файле angular-cli.json найдите массив styles[] и добавьте сюда каталог с отличными шрифтами, как показано ниже:
"apps": [
    {
      "root": "src",
      "outDir": "dist",
      ....
      "styles": [
          "styles.css",
          "../node_modules/bootstrap/dist/css/bootstrap.css",
          "../node_modules/font-awesome/css/font-awesome.css" // -here ebpack will 
   automatically build a link css element out of this!?
      ],
      ...
  }
  ]
],

В более поздних версиях Angular вместо файла ../ используйте файл angular.json. Например, используйте "node_modules/font-awesome/css/font-awesome.css"

  1. Поместите несколько значков с отличным шрифтом в любой HTML-файл, который вы хотите:

  2. Остановите приложение Ctrl + c, затем повторно запустите приложение, используя ng serve, потому что наблюдатели предназначены только для папки src, а angular-cli.json не отслеживается для изменений.

  3. Наслаждайтесь своими потрясающими иконками!

person Kiran Mistry    schedule 19.04.2020
comment
Я также поместил его в angular.json. Я скопировал его в активы специально, потому что он не работал - person joler-botol; 19.04.2020