ng-cli 6 和字体真棒图标不起作用

Posted 2023-03-03

【中文标题】ng-cli 6 和字体真棒图标不起作用

【英文标题】：ng-cli 6 and font awesome icons not working

【发布时间】：2018-11-28 18:43:58

【问题描述】：

我正在使用 font-awesome 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 命令转译我的代码。在浏览器中，我收到了这些错误。

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

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

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

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

【问题讨论】：

github.com/angular/angular-cli/wiki/…

How to add font-awesome to Angular 2 + CLI project的可能重复

感谢您的回复。我看到了这个帖子，并试图关注它。除了我包含的 angular.json 样式部分中的添加行之外，“使用 css”部分没有任何内容。我没有使用 scss，但据说我尝试创建它建议的两个文件，但我的浏览器中仍然出现空方块和相同的 404 错误

我通过一个 hacky 解决方案让它工作，我更改了源代码。在 font-face.css 文件中，第一部分是 font-face，有很多“src”属性，所有 URL 都有相对路径，它们都以“..”开头。为了让图标出现，我删除了前导的“..”。我将继续更改配置，看看是否可以使用未更改的 font-awesome.css 文件。

【参考方案1】：

我也经历了这个问题并决定如下。 在 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。

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

【讨论】：

请分享运行代码。例如：stackblitz.com

【参考方案2】：

我遇到了同样的问题，请按照说明进行操作！！它的工作原理，

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

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

第二步：

需要安装包之后

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

第三步：

在你的 angular.json 中添加

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

在右侧块中添加 js 和 css 文件（脚本/样式）

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

【参考方案3】：

首先，安装字体 awesome

npm install font-awesome

然后添加

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

在 styles.css 文件中。

【参考方案4】：

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