Используйте font awesome 5 на угловом материале 7

Я использую angular 7.0.1 и angular material 7.0.2, я хочу добавить значки font awesome 5.4.2, и я пытаюсь выполнить шаги в fontawesome web, но я не могу получить шрифт font awesome icon.

первый:

npm install --save-dev @fortawesome/fontawesome-free

затем в styles.scss добавьте:

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';

и в _variables.scss добавить:

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

теперь в app.component.ts добавляем:

import { MatIconRegistry } from "@angular/material";

[...]

constructor(
    public matIconRegistry: MatIconRegistry,
  ) {
    matIconRegistry.registerFontClassAlias ('fas');  // tried with 'fas' and with 'fa'
  }

и, наконец, я предлагаю напечатать потрясающие значки шрифтов с помощью:

<mat-icon mat-list-icon fontIcon="fas github"></mat-icon>  // tryed also with 'fas-github', 'fasGithub', 'github', 'fa-github', 'fa github' and 'faGithub'

Но шрифт иконки font awesome никогда не печатается. Мне не хватает чего-то важного и очевидного, но сейчас я этого не вижу.


angular7 icon-fonts font-awesome-5 angular-material-7
person Alex    schedule 27.10.2018    source источник
comment
вы пробовали fontIcon="fas fa-github"?   -  person Temani Afif    schedule 29.10.2018
comment
Раньше не пробовал, но попробовал сейчас без положительного результата. Так что я до сих пор не могу отобразить значок font awesome.   -  person Alex    schedule 29.10.2018

Ответы (7)


arrow_upward
37
arrow_downward

Вот что я сделал, и у меня это работает:

В моем файле styles.scss есть

@import "~@fortawesome/fontawesome-free/css/all.css";

Тогда у меня есть

<mat-icon fontSet="fa" fontIcon="fa-clipboard-check"></mat-icon>

Со scss у меня тоже не сработало.

person Gabb1995    schedule 01.11.2018
comment
Да! Кажется, есть какая-то проблема с scss, он не работает. И я не использовал fontSet = fa, но обнаружил, что, поскольку я использую бренды, мой fontSet должен быть потрясающим, если я использую fa, я вижу только квадрат. Спасибо. - person Alex; 02.11.2018

arrow_upward
10
arrow_downward

Я выполнил следующие простые шаги, мне удалось установить font awesome 5.6.3 (бесплатная версия) в моем проекте Angular 7.

запустите команду ниже, чтобы установить последнюю версию font-awesome.

npm install --save-dev @fortawesome/fontawesome-free

Добавьте пути к файлам в файле angular.json.

"styles": ["node_modules/@fortawesome/fontawesome-free/css/all.css"],
"scripts": ["node_modules/@fortawesome/fontawesome-free/js/all.js"]

для справки: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

Все в порядке .. надеюсь, это поможет ..

person Karthikeyan Vellingiri    schedule 20.01.2019
comment
Это действительно помогло :) Я создаю приложение Cordova и обнаружил, что если я добавлю all.js, время загрузки значительно сократится. Похоже, что для моего приложения это не нужно. - person the7erm; 04.09.2019

arrow_upward
6
arrow_downward

Если вы используете scss, вы можете просто импортировать стили в ваш vendor.scss:

$fa-fort-path: "~@fontawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

И используйте его как обычно:

<span class="fab fa-refresh fa-spin fa-github" aria-hidden="true"></spin>

Обратите внимание на пространства имен: fab для брендов, fas для твердых и т. Д.

Для меня это был лучший вариант.

Или вы можете использовать библиотеку angular-fontawesome.

person Tim    schedule 27.11.2018
comment
Это то, что я искал. Спасибо. - person Marin Takanov; 04.02.2019
comment
$fa-font-path должен быть фортом, а не шрифтом. - person jacroe; 30.08.2019

arrow_upward
2
arrow_downward 

    <fa-icon icon="fa-clipboard-check"></fa-icon>

Убедитесь, что FontAwesomeModule импортирован в контейнерный модуль вашего компонента.

Если вам нужен svg:

    import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
    import { library } from '@fortawesome/fontawesome-svg-core';
    import {faClipboardCheck} from '@fortawesome/free-solid-svg-icons';
    library.add(faClipboardCheck);
person Wildhammer    schedule 03.05.2019

arrow_upward
2
arrow_downward

Я использую два решения:

Большое количество используемых иконок

Импортировать основной fontawesome.scss файл.

Импортировать файл предпочтительного стиля, например regular.scss (как в angular.json, так и через @import).

Зарегистрируйте набор шрифтов по умолчанию в модуле, поэтому вам не нужно определять его для каждого значка:

constructor(private matIconRegistry: MatIconRegistry) {
    matIconRegistry.setDefaultFontSetClass('far'); // or 'fas' for solid style etc.
}

Наконец, определите строку значка:

<mat-icon fontIcon="fa-smile"></mat-icon>

Небольшое количество используемых иконок

Нет необходимости импортировать все значки, вам нужно только определить каждый значок отдельно в модуле. Другим преимуществом является то, что вы можете определить собственное имя значка для большей ясности, комбинировать значки с разными стилями (сплошные, двухцветные ...) без загрузки другого набора значков или просто добавить свои собственные значки svg или логотип.

constructor(private matIconRegistry: MatIconRegistry,
            private sanitizer: DomSanitizer) {
    matIconRegistry.addSvgIcon('smile', sanitizer.bypassSecurityTrustResourceUrl('smile.svg'));
}

Значок:

<mat-icon svgIcon="smile"></mat-icon>
person hovado    schedule 18.03.2020

arrow_upward
0
arrow_downward

Я загрузил пакет font-awesome и скопировал папку / webfonts и файл /css/all.css в src / assets /. Я добавил путь src / assets / css / all.css в массив стилей в параметрах сборки в моем angular.json, как показано ниже.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "NAME_OF_PROJECT": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/NAME_OF_PROJECT",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/.well-known"
            ],
            "styles": [
            "src/styles.scss",
            "src/assets/css/all.css",
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        }
      }
    }}
}

Теперь иконки font awesome доступны для использования в вашем приложении angular. Я использовал класс fa-2x для управления размером значка. изменение fontSet на fal даст вам облегченную версию font awesome.

<mat-icon fontSet="fa" class="fa-2x" fontIcon="fa-user" matBadge="8" matBadgeSize="medium" matBadgePosition="after" matBadgeColor="warn"></mat-icon>

person Baaji Shaik    schedule 09.09.2020
comment
Я считаю, что этот ответ был бы даже лучше, если бы фрагмент json был включен как текст. - person code11; 09.09.2020

arrow_upward
0
arrow_downward

Если вы хотите использовать значки Font Awesome внутри <mat-icon> Просто используйте, как показано ниже,

<mat-icon><i class="fa fa-file-chart-line"></i></mat-icon>

** Вы должны были импортировать Font Awesome CSS или SCSS в свой проект.

person Rajitha Kithuldeniya    schedule 28.09.2020