ng cli 6和字体可怕图标不工作

Question

我正在使用font awesome 4.70、angular 6.0.8和cli 6.0.8（下面是完整版本），我正在尝试用cli的“ng build”替换现有的Web包过程。我遇到了一个问题，font Aewome的图标没有显示出来。我在过去的旧版本中也遇到过类似的问题，但我还没有找到解决方案。

我的资源中连接了字体

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

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

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

我没有使用“ng service”，我只是使用build命令来转译我的代码。在浏览器中，我收到了这些错误。

GEThttp://localhost:29380/fontawesome-webfont.woff2?v=4.7.0404（未找到）

GEThttp://localhost:29380/fontawesome-webfont.woff?v=4.7.0404（未找到）

收到http://localhost:29380/fontawesome-webfont。ttf？v=4.7.0 404（未找到）

我在输出目录中看到assests，但由于某种原因它们不可用，我得到404。

Answer 1

首先，安装字体真棒

npm安装字体真棒

然后添加

@导入“~ font-awesome/css/font-awesome.css；

在样式中。css文件。

Answer 2

我也有同样的问题，并遵循指示！！行得通，

第1步：删除fort棒：注册表和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 3

我也经历了这个问题，决定如下。在角度上。内部版本中的json文件

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

在构建中

{
    "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图标。

我希望这能解决你的问题。