Использовать шрифт 5 на угловом материале 7 - PullRequest
Новая
       30

Использовать шрифт 5 на угловом материале 7

0 голосов
/ 27 октября 2018

Я использую Angular 7.0.1 и Angular Material 7.0.2, я хочу добавить иконки шрифта 5.4.2, и я пытаюсь следовать инструкциям в Fontawesome Web, но я не могу получить шрифт Awesomeшрифт значка.

сначала: 

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'

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

Ответы [ 4 ]

0 голосов
/ 04 мая 2019 
    <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);
0 голосов
/ 27 ноября 2018

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

$fa-font-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>

Запомните пространства имен, Потрясающе для брендов, Фаст для твердых и т. Д.

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

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

0 голосов
/ 20 января 2019

Я следовал ниже простых шагов, я могу установить шрифт потрясающий 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

Таты все .. надеюсь, это поможет ..

0 голосов
/ 01 ноября 2018

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

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

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

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

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

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

...