Шрифты Потрясающие шрифты не загружаются в Angular после сборки - PullRequest
Новая
       39

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

0 голосов
/ 19 апреля 2020

Я использую Angular 8. Я добавил font-awesome путь в angular. json следующим образом. 

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

Однако все значки были пустыми. (не загружается). Итак, я поместил все удивительные шрифты файлы в папку активов. Затем я поместил ссылку на файл css в индексе. 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

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

1 Ответ

0 голосов
/ 19 апреля 2020

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

  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"

Поместите несколько удивительных шрифтов в любой нужный вам файл html:

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

Наслаждайтесь великолепными иконками!

...