Angular を使用して Font-Awesome を開く方法

今回は、Angular を使用して Font-Awesome を開く方法と、Angular を使用して Font-Awesome を開く方法の注意点を説明します。以下は実際的なケースです。

前書き

この記事では主に、Angular 姿勢で Font-Awesome を開くことに関する関連コンテンツを紹介し、参考と学習のために共有します。以下では多くを述べません。詳しい紹介。

環境

• Angular: v5.2.9

• Font-Awesome: v5.0.10

• angular-fontawesome: v0.1.0-9

使用する必要はありませんもはや伝統 Web フォントの方法

私は以前は Font-Awesome の伝統的な方法に慣れていました。ページの下部にある font-awesome.min.css ファイルを参照し、<i class="fa xxx"></i> を使用してアイコンを配置します。ページ内 - これは Angular でも可能ですが、これは Angular 的ではありません - Angular モジュール コンポーネントを使用して実際に実装できます。この記事の執筆時点では、Package for Angular は公式 Web サイトで正式に公開されていませんが、公式 GitHub にはすでに関連ドキュメントのチュートリアルが存在しています。この記事の以下の内容は、基本的に公式ドキュメントに準拠しています。

パッケージのインストール

npmメソッド:

$ npm install @fortawesome/fontawesome-svg-core --save
$ npm install @fortawesome/free-solid-svg-icons --save
$ npm install @fortawesome/angular-fontawesome --save

その中で、「free-solid-svg-icons」が古典的なスタイルで、「通常」と「ライト」オプションがあります:

$ npm install @fortawesome/free-brands-svg-icons --save
$ npm install @fortawesome/free-regular-svg-icons --save

基本モジュール

// ...
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
 // ...
 imports: [
 // ...
 FontAwesomeModule
 ],
 // ...
})
// ...

を app.module.ts にインポートします。一度インポートすると、他のコンポーネントで繰り返しインポートする必要はありません。これは、次のアイコンの使用方法の基礎となります。

オンデマンド方式1を使用する

必要なアイコンをコンポーネントにインポートします:

// ...
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
//...
export class AppComponent {
 //...
 myIcon = faCoffee;
}

注: ここでインポートされるアイコン名には接頭辞faを付け、キャメルケース命名法を使用する必要があります。インポート後、次の方法で HTML テンプレートでアイコンを使用できます:

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

アイコン名は HTML テンプレートで直接使用する必要があることに注意してください。アイコンは公式 Web サイトのアイコン ライブラリにあります。

オンデマンドの利用方法その2

2つ目のオンデマンドの利用方法は、ライブラリを使用した後、コンポーネントにアイコンをインポートする必要がなくなります。 :

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

ライブラリを取得したら、使用する必要があるアイコンを追加します:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

次に、アイコンをライブラリに追加します:

// import ...
library.add(faCoffee);
// NgModule({...

このようにして、HTML テンプレートで直接使用できます。

インポートのフルセット

平均的なサイズの Web サイトの場合は、名前を検索して 1 つずつインポートするよりも、すべてのアイコンをインポートして、必要なものを使用することをお勧めします。完全なインポート方法は、アイコン名をアイコン パッケージのエイリアスに置き換えることです。

// Single:
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
// All:
import { fas } from '@fortawesome/free-solid-svg-icons';

「fas」の「s」は、「free-solid-svg-icons」の「solid」を表します。類推すると、他のスタイルのインポートは次のようになります:

import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

次に、それをライブラリに追加します:

library.add(fas);
// or
library.add(fas, far);

追加後、HTML で任意にアイコンを使用できます。

HTMLテンプレートでの書き方

先ほどの

<fa-icon [icon]="coffee"></fa-icon>
// or
<fa-icon icon="coffee"></fa-icon>

の書き方は実は簡単です。 far または fab が必要な場合は、次のように記述する必要があります:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]"></fa-icon>

配列の最初の要素にプレフィックスとしてスタイル パッケージのエイリアスを入力します。この正確な書き方をお勧めします。

基本的なアイコン効果

Font-Awesome には、HTML タグの属性を通じて実現できる優れたアイコン効果も多数あります。ドキュメントから直接コピーした基本的な使用法をいくつか示します。

回転とパルス回転:

<fa-icon [icon]="[&#39;fas&#39;, &#39;spinner&#39;]" [spin]="true"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;spinner&#39;]" [pulse]="true"></fa-icon>

固定幅:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" [fixedWidth]="true"></fa-icon>

境界線:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" [border]="true"></fa-icon>

反転:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="horizontal"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="vertical"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="both"></fa-icon>

サイズ:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="xs"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="lg"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="6x"></fa-icon>

角度による偏向:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="90"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="180"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="270"></fa-icon>

Leave左または右に配置します:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" pull="left"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" pull="right"></fa-icon>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue+webpackを使ったプロジェクトの作り方(コード付き)

vue.jsのデータバインディングの操作方法

以上がAngular を使用して Font-Awesome を開く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。