web-dev-qa-db-ja.com

Angular 6？のFontAwesomeアイコン

AngularプロジェクトでFontAwesomeのアイコンを使用しようとしています。
「Getting Started」ガイドから始めました： 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：アイコンが見つかりませんでした。このコンポーネントにnullまたは未定義のアイコンオブジェクトを提供したようです。

私のプロジェクトでFontAwesomeを使用する最初の試み、有用な一般情報は大歓迎です。

UPDATE：アプリケーション全体を再構築して動作するようになりました。私はVS Codeを使用していたので、ファイルを保存するときに、開発者がナビゲートして開発を確認できるように最終バンドルを再作成しようとします。コンポーネントのメモリ内状態で実際に何が起こるかわかりません。参照の不整合が原因でアイコンが表示されなかったと思います。

angulartypescriptsvgiconsfont-awesome
8
mororo

あなたがしなければならないのは：

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に何かを追加したり、yarnやnpmで何かをインストールしたりする必要はありません。

EDIT：質問に答えるために、チュートリアルで述べたようにfaCheckを使用したstackblitzがあります、それは私のために働いています： https： //stackblitz.com/edit/angular-4ebr9t

チュートリアルで述べたように、すべての依存関係をインストールしたかどうかを確認してください。

5
Observablerxjs

このAngle6プロジェクトでFontawesomeを使用しています。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

4
hamilton.lima

1-これをインストールnpm install @fortawesome/fontawesome-free

2-これをangular.jsonに追加します（angular-cli.json）

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

3-これで、<i>タグでフォントを使用できます

2
ahmet aslan