6

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

我的资产中连接了字体

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

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

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

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

GET http://localhost:29380/fontawesome-webfont.woff2?v=4.7.0 404（未找到）

GET http://localhost:29380/fontawesome-webfont.woff?v=4.7.0 404（未找到）

GET http://localhost:29380/fontawesome-webfont.ttf?v=4.7.0 404（未找到）

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

在此处输入图像描述

4

4 回答 4

3

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

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

在build > styles部分，我在 node_modules 文件夹中包含了 font-awesome 路径：

{
    "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 样式文件中，我还包含 ion-icon，以防您使用 Ionic。

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

于 2018-11-01T13:40:11.733 回答
1

我有同样的问题并按照说明进行！有用，

第 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 文件（脚本/样式）

注意：在测试和构建块中添加它

于 2020-04-01T14:13:29.680 回答
0

一、安装字体真棒

npm install font-awesome

然后添加

@import "~font-awesome/css/font-awesome.css;

在styles.css 文件中。

于 2018-10-18T08:02:05.023 回答
-7

单击font-awesome/fonts/fontawesome-webfont.ttf或归档并在您的操作系统中font-awesome/fonts/FontAwesome.otf安装FontAwesome 字体

于 2018-08-21T06:51:26.080 回答