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 文件），所以我要做的是：< / p>

我从我的 style.scss 文件中删除了 css 的这一部分。

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

然后将其放入新的 css 文件中，该文件在我的 style.scss 的同一根目录下创建文件。

然后有效

Fontawesome网络字体在内容属性上显示正方形（在本地有效，并且在产品环境中受阻）

2 个答案: