ng-cli 6 和 font Awesome 图标不起作用

2024-05-20

我正在使用 font-awesome 4.70、Angular 6.0.8 和 cli 6.0.8(完整版本如下) 我正在尝试用 cli 的“ng build”替换我们现有的 webpack 进程。我遇到了 font Awesome 图标未显示的问题。我过去在旧版本中见过类似的问题,但我还没有找到解决方案。

我已将字体连接到我的资源中

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

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

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

我没有使用“ngserve”,我只是使用构建命令来转译我的代码。在浏览器中我收到这些错误。

GET http://localhost:29380/fontawesome-webfont.woff2?v=4.7.0 http://localhost:29380/fontawesome-webfont.woff2?v=4.7.0404(未找到)

GET http://localhost:29380/fontawesome-webfont.woff?v=4.7.0 http://localhost:29380/fontawesome-webfont.woff?v=4.7.0404(未找到)

GET http://localhost:29380/fontawesome-webfont.ttf?v=4.7.0 http://localhost:29380/fontawesome-webfont.ttf?v=4.7.0404(未找到)

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


我也经历过这个问题并决定如下。 在里面角度.json文件在构建 > 资产第一部分包括要复制的字体的路径:

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

并且在构建 > 样式我在 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。

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ng-cli 6 和 font Awesome 图标不起作用 的相关文章

随机推荐