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

基本モジュールをapp.module.tsにインポートします

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

インポート後、他のコンポーネントで再度インポートする必要はありません。これは、次のアイコンの使用方法の基礎となります。

オンデマンド方式 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>

Border:

<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>

靠左或靠右排列:

<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中文网其它相关文章！

推荐阅读：

Vue组件实现简单弹窗功能案例详解

swiper操作图片步骤详解

以上がAngular+Font-Awesome 手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。