Fontawesome webfont показывает квадрат на свойство контента (отлично работает на локальном и застрял в среде prod)

Question

Я использую fontAwesome 4.7 в проекте Angular 6, поэтому я использую путь fontAwesome.css в моем angular.json из папки "node_module".

Моя проблема - значки, использующие свойства css, которые не работают наprod envireonnement, но на локальном работает нормально & (значки, использующие классы css для элементов HTML, прекрасно работают как в локальном, так и в prod envireonnement).

Когда я проверяю элемент на своем локальном компьютере, я вижу, что значки, использующие свойства css, показанные так

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

и в моем css-файле это выглядит так:

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

, но для значков, использующих css в html, вот так:

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

отлично работает

так что моя проблема в том, что я вынужден использовать иконки из свойств CSS, но он застрял с этим квадратом: (

Answer 1

Я повторно решил проблему, но не понял, откуда она возникла (я думаю, что проблема была с моим scss файлом), поэтому я сделал следующее:

Я удаляю эту часть css из моего style.scss файла.

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

И я поместил его в новый файл css , созданный в том же корне моего style.scss файл.

А потом работает

Answer 2

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';