FontAwesome иконки в Angular 6? - PullRequest
Новая
       34

FontAwesome иконки в Angular 6?

0 голосов
/ 24 августа 2018

Я пытаюсь использовать иконки из FontAwesome в проекте Angular.
Я начал с руководства «Начало работы», которое можно найти здесь: FontAwesome Angular Getting Started

Все работает нормально, я вижу значок faCoffee, где бы я ни находился в моих шаблонах.Но если я попытаюсь изменить его на другой значок (например, значок «проверить»), ничего не отобразится.

Я изменил свое объявление значка на уровне компонента, чтобы оно выглядело так: 

import { faCheck } from '@fortawesome/free-solid-svg-icons';

Изменен HTML-шаблон для отображения моего нового значка: 

<fa-icon [icon]="faCheck"></fa-icon>

Затем назначение поля значка в моем компоненте: 

faCheck = faCheck;

Обратите внимание, что я существенно меняюсьтолько имя иконки из примеров, которые я тестировал и работал на URL, который я разместил выше.Даже если я укажу определение «faCheck» в своем объявлении, я вижу, что оно определено, поэтому я ожидаю, что оно будет доступно.

Консоль Chrome отображает эту ошибку при загрузке страницы:

FontAwesome: не удалось найти значок.Похоже, что вы предоставили пустой или неопределенный объект значка для этого компонента.

Первая попытка использовать FontAwesome в моих проектах, полезная общая информация приветствуется.

ОБНОВЛЕНИЕ: Получил работу, восстанавливая все мое приложениеЯ использовал VS Code, поэтому, когда вы сохраняете файл, он пытается воссоздать окончательный комплект, чтобы вы могли перемещаться и проверять свою разработку.Я не знаю, что на самом деле происходит с компонентами в памяти.Я думаю, что значок не показывался из-за некоторого смещения ссылок.

Ответы [ 3 ]

0 голосов
/ 24 августа 2018

Я использую Fontawesome в этом проекте angular6, пожалуйста, посмотрите на package.json, возможно, это поможет решить вашу проблему: https://github.com/hamilton-lima/portfolio-web/blob/master/package.json

Это то, что я установил 

    "@fortawesome/angular-fontawesome": "^0.1.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-brands-svg-icons": "^5.1.0",
    "@fortawesome/free-regular-svg-icons": "^5.1.0",
    "@fortawesome/free-solid-svg-icons": "^5.1.0",
    "angular-font-awesome": "^3.1.2",

Обязательно импортируйте необходимые значки в используемую библиотеку 

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fas, far, fab);

См. Пример здесь: https://github.com/hamilton-lima/portfolio-web/blob/master/src/app/shared/shared.module.ts

0 голосов
/ 01 июня 2019

1 - установить это npm install @fortawesome/fontawesome-free

2 - Добавьте это к angular.json (angular-cli.json) 

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

3 - Теперь вы можете использовать шрифты с тегом <i>

0 голосов
/ 24 августа 2018

все, что вам нужно сделать, это:

1 - добавьте это в ваш index.html: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

2 - используйте ваш значок как: 

<i class="fas fa-check"></i>

Вам не нужно ничего добавлять ни в свои component.ts, ни в свои app.module.ts, ни устанавливать что-либо с помощью пряжи или npm.

EDIT: Чтобы ответить на ваш вопрос, вот стеклиц с faCheck, использованным, как упомянуто в руководстве, оно работает для меня: https://stackblitz.com/edit/angular-4ebr9t

проверьте, установлены ли все зависимости, как указано в руководстве.

...