Question

我正在使用超棒的4.70，Angular 6.0.8和cli 6.0.8（下面有完整版本）我试图用cli的“ ng build”替换我们现有的webpack流程。我遇到了字体真棒图标无法显示的问题。过去，我曾在较旧的版本中看到过类似的问题，但是我还没有找到解决方案。

我将字体挂在我的资产中

assets:[
    "./node_modules/font-awesome/fonts",
    //other assets
]

我将css包含在angula.json的样式部分中

styles:[
    "./node_modules/font-awesome/css/font-awesome.css",
    //other styles
]

我不使用“ ng serve”，仅使用build命令来翻译我的代码。在浏览器中，我得到了这些错误。

我在输出目录中看到了资产，但是由于某些原因，这些资产不可用，我得到了404。

Answer 1

我也经历了这个问题，并决定如下。在 build>资产部分的 angular.json 文件中，我包括了要复制的字体的路径：

{
     "glob": "**/*",
     "input": "node_modules/font-awesome/fonts",
     "output": "assets/fonts"
}

在 build> styles 部分中，我在node_modules文件夹中添加了字体真棒路径：

{
    "input": "node_modules/font-awesome/scss/font-awesome.scss"
}

最后，在全局scss样式文件中，我包含了以下说明：

$fa-font-path: "../assets/fonts" !default;
i[class^="fa-"], ion-icon[class^="fa-"] {
    font-family: "FontAwesome" !important;
}

请注意，在全局scss样式文件中，如果您使用的是Ionic，我还包括ion-icon。

我希望这可以解决您的问题。

Answer 2

首先，安装很棒的字体

npm安装真棒字体

然后添加

@import“〜font-awesome / css / font-awesome.css;

在styles.css文件中。

Answer 3

我遇到了同样的问题，并按照说明进行！！它有效，

第1步：删除fortawesome：registry和authToken（如果有）

npm config delete "@fontawesome:registry"
npm config delete "//npm.fontawesome.com/:_authToken"

第2步：

需要安装软件包后

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

第3步：

在您的angular.json中添加

"node_modules/@fontawesome/fontawesome-free/js/all.js"
"node_modules/@fontawesome/fontawesome-free/css/all.css"

以正确的块（脚本/样式）添加js和css文件

注意：将其添加到测试和构建模块中

Answer 4

点击font-awesome/fonts/fontawesome-webfont.ttf或font-awesome/fonts/FontAwesome.otf文件，然后在操作系统中安装 FontAwesome字体