fontawesome только на -dev не видно, но онлайн - PullRequest
Новая
       29

fontawesome только на -dev не видно, но онлайн

0 голосов
/ 21 марта 2019

Я установил fontawesome с нижеприведенным cmd, как предложено на их официальном сайте. 

npm install --save-dev @fortawesome/fontawesome-free

Для производственных целей я добавил ниже в index.html 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css">

ng serve -> не отображает значки при отсутствии подключения к Интернету, т.е. в автономном режиме.

Импорт файла all.css в style.css, как показано ниже, работает в автономном режиме, но в ng serve fa поддерживается экспорт файлов в папку dist. 

@import "../node_modules/@fortawesome/fontawesome-free/css/all.css";

ng build --prod -> отображает иконки в режиме онлайн, как и предполагалось.

Как увидеть значки в автономном режиме с ng serve?

мой package.json выглядит 

{
  "name": "test-app",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.5",
    ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.2",
    ...
    "@fortawesome/fontawesome-free": "^5.8.0",
    ...
  }
}

Я использую это в проекте Angular 7.

1 Ответ

0 голосов
/ 21 марта 2019

Вам нужно скачать пакет из шрифта на удивительном сайте .Этот пакет включает в себя файлы css, js, а также woff, svg, eot и т. Д.

В вашем HTML (DEV и PROD) вместо указания URL-адреса CDN <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css"> вы должны указать относительные пути к своим шрифтамкаталог, который (согласно практике) должен находиться в папке активов.

Что-то вроде: 

@font-face {
      font-family: Ionicons;
      src: url(../assets/fonts/ioniconsAI.eot?v=2.0.1);
      src: url(../assets/fonts/ioniconsAI.eot?v=2.0.1#iefix) format("embedded-opentype"), url(../assets/fonts/ioniconsAI.ttf?v=2.0.1) format("truetype"), url(../assets/fonts/ioniconsAI.woff?v=2.0.1) format("woff"), url(../assets/fonts/ioniconsAI.svg?v=2.0.1#Ionicons) format("svg");
      font-weight: 400;
      font-style: normal
    }

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

...