Question

我按照官方网站的建议在cmd下方安装了fontawesome。

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->在没有Internet连接（即脱机）时不显示图标。

像下面一样，在all.css中导入style.css文件可以离线运行，但在ng serve中则支持将文件导出到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项目中使用它。

Answer 1

您必须download the pack from font awesome website。该软件包包括css，js文件以及woff，svg，eot等。

在您的HTML（DEV和PROD）中，而不是给出CDN URL <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css">，您应该提供字体目录的相对路径（根据实践，该目录应位于assets文件夹中）。

类似的东西：

@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
    }

希望有帮助。

fontawesome仅在-dev上不可见，但在线

1 个答案: