ng-cli 6和字体真棒图标不起作用 [英] ng-cli 6 and font awesome icons not working

问题描述

我使用的字体真棒4.70，Angular 6.0.8和cli 6.0.8（下面有完整的版本控制）
我试图用cli的 ng build替换现有的webpack程序。我遇到了字体真棒图标无法显示的问题。我以前在较早的版本中也遇到过类似的问题，但是我还没有找到解决方案。

我将字体挂在资产中

 资产：[
 ./node_modules/font-awesome/fonts，
 //其他资产
] 
  

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

  styles：[
 ./node_modules/font-awesome/css/font-awesome.css，
 //其他样式
] 
  

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

获取

解决方案

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

  {
 glob： ** / *，
 input： node_modules / font-awesome / fonts，
输出：资产/字体 
} 
  

在构建>样式部分，我在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样式文件中，我还包含ion-icon

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

I am using font-awesome 4.70, angular 6.0.8, and cli 6.0.8(full versioning below) I am trying to replace our existing webpack process with the cli's "ng build". I have run into an issue with font awesome's icons not showing up. I have seen similar issues in the past with older versions but I havent found a solution yet.

I have the fonts hooked up in my assets

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

And I am including the css in the styles portion of my angula.json

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

I am not using "ng serve", I am only using the build command to transpile my code. In the browser I am getting these errors.

GET http://localhost:29380/fontawesome-webfont.woff2?v=4.7.0 404 (Not Found)

GET http://localhost:29380/fontawesome-webfont.woff?v=4.7.0 404 (Not Found)

GET http://localhost:29380/fontawesome-webfont.ttf?v=4.7.0 404 (Not Found)

I see the assests in the output directory but for some reason they are not available and I am getting 404s.

解决方案

I also went through this problem and decided as follows. In the angular.json file in the build > assets section I included the path of the fonts to be copied:

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

And in the build > styles section I've included the font-awesome path in the node_modules folder:

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

And finally, in the global scss-style file I've included these instructions:

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

Note that in the global scss-style file I also include the ion-icon, in case you are using Ionic.

I hope this solves your problem.

这篇关于ng-cli 6和字体真棒图标不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！