Как использовать matIconRegistry и fontawesome для значка Facebook? - PullRequest
Новая
       11

Как использовать matIconRegistry и fontawesome для значка Facebook?

0 голосов
/ 23 марта 2020

Я знаю, что есть несколько способов сделать это, но я пытаюсь следовать указаниям здесь ...

https://material.angular.io/components/icon/examples

У меня есть это в моем app.module.ts… 

import { MatIconModule, MatIconRegistry } from '@angular/material/icon';

  imports: [
    MatIconModule,

  providers: [
    MatIconRegistry,

и в конкретном модуле ts… 

import { MatIconRegistry } from '@angular/material/icon';


constructor(public matIconRegistry: MatIconRegistry ) {
              matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
               }

почему эта строка кода работает ... 

    <mat-icon fontSet="fa" fontIcon="fa-times-circle" class="facebook-icon"></mat-icon>

пока эта строка кода не работает? 

    <mat-icon fontSet="fa" svgIcon="fa-facebook-square" class="facebook-icon"></mat-icon>

они оба свободны. Почему-то значок facebook не находится в стандартной библиотеке 'fontawesome', как объявлено выше? Или мне чего-то не хватает?

1 Ответ

0 голосов
/ 24 марта 2020

Наконец-то разобрался! Как я и подозревал, когда сказал: «Почему-то значок facebook отсутствует в стандартной библиотеке« fontawesome », как заявлено выше? Или я что-то пропускаю?»

В конце конструктор, ты вставил этот код ... 

..., public matIconRegistry: MatIconRegistry ) 
              {
                matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
              }

Я искал в моем файле angular. json и заметил следующее ... 

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
      "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
      "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
      "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
      "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
      "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
      "src/styles.scss"
    ],

Ага! Есть несколько наборов библиотек, и одна называется «fontawesome» ... по какой-то причине я попробовал следующее дополнение к своему конструктору ... 

..., public matIconRegistry: MatIconRegistry ) 
              {
                matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
                matIconRegistry.registerFontClassAlias('brands', 'fab');}

              }

Затем, когда я использую значок, я добавляю от "б" до "фа" ... 

    <mat-icon fontSet="fab" fontIcon="fa-facebook-square" class="facebook-icon"></mat-icon>

Ууу! сейчас это работает. Вы можете зарегистрировать любую другую библиотеку, которая вам может понадобиться. Между прочим, есть подсказка для правильной библиотеки, когда вы смотрите на удивительную страницу шрифта для определенного значка c. Посмотрите в верхнем левом углу, чуть ниже имени значка, вы увидите что-то вроде этого: «Стиль брендов».

...