Fontawesome webfont show square on content 属性（在本地工作正常并卡在产品环境中）

Question

我在 Angular 6 项目中使用 fontAwesome 4.7，所以我在 "node_module" 文件夹中的 angular.json 上使用 fontAwesome.css 的路径。

我的问题是使用 css 属性的图标在产品环境中不起作用，但在本地工作正常 &（在 HTML 元素上使用 css 类的图标在本地和产品环境）。

当我在本地检查元素时，我看到使用 css 属性的图标显示为

.panel-control-collapse:before {
content: "";
}

在我的 css 文件中是这样的：

.panel-control-collapse:before {
content: "\f068";
}

但是对于像这样在 html 上使用 css 的图标：

<a class="fa fa-upload" title="Importer en masse"></a>

工作正常

所以我的问题是我被迫使用来自 css 属性的图标，但它卡在那个方块上 :(

Answer 1

angular.json

"assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/font-awesome/fonts/",
                "output": "./assets/fonts/"
              }
            ]

styles.scss

$fa-font-path: "/assets/fonts/";
@import '~font-awesome/scss/font-awesome';

Answer 2

我很喜欢这个问题，但我不明白它是从哪里来的（我认为问题出在我的 scss 文件）所以我所做的是：

我从 [=41 中删除了 css 的这一部分=] 文件。

.panel-control-collapse:before { font-family: FontAwesome; content: "\f068"; }

我把它放在一个新的 css 文件中，在我的 style.scss 文件.

然后就可以了

Fontawesome webfont show square on content 属性（在本地工作正常并卡在产品环境中）

Fontawesome webfont show square on content property ( work fine on local and stuck on prod environnement )

html

css

icons

font-awesome

inspector