今回は、Angular を使用して Font-Awesome を開く方法と、Angular を使用して Font-Awesome を開く際の 注意事項 について説明します。実際のケースを見てみましょう。
前書き
この記事では主に、Angular 姿勢で Font-Awesome を開くことに関する関連コンテンツを紹介し、参考と学習のために共有します。以下では多くを述べません。詳しい紹介。環境
使用する必要はありませんもはや伝統 Web フォントの方法
私は以前は Font-Awesome の伝統的な方法に慣れていました:参照 font-awesome.min.css ファイルをページの下部に配置し、 を使用してアイコンを配置ページ内 - これは Angular でも実現可能ですが、これは Angular 的ではありません - Angular モジュール コンポーネントを使用して実際に実装できます。この記事の執筆時点では、Package for Angular は公式 Web サイトで正式に公開されていませんが、公式 GitHub にはすでに関連ドキュメントのチュートリアルが存在しています。この記事の以下の内容は、基本的に公式ドキュメントに準拠しています。 <i class="fa xxx"></i>
インストールパッケージ
npmメソッド:
$ npm install @fortawesome/fontawesome-svg-core --save $ npm install @fortawesome/free-solid-svg-icons --save $ npm install @fortawesome/angular-fontawesome --save
$ 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>
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]="['fas', 'coffee']"></fa-icon>
配列の最初の要素にプレフィックスとしてスタイル パッケージのエイリアスを入力します。この正確な書き方をお勧めします。
基本的なアイコン特殊効果Font-Awesome には、多くの優れたアイコン特殊効果もあります。これは、HTML タグ
属性を通じて実現できます。ドキュメントから直接コピーしたいくつかの基本的な使用法を次に示します。 回転とパルス回転:
<fa-icon [icon]="['fas', 'spinner']" [spin]="true"></fa-icon> <fa-icon [icon]="['fas', 'spinner']" [pulse]="true"></fa-icon>
固定幅:
<fa-icon [icon]="['fas', 'coffee']" [fixedWidth]="true"></fa-icon>
Border:
<fa-icon [icon]="['fas', 'coffee']" [border]="true"></fa-icon>
翻转:
<fa-icon [icon]="['fas', 'coffee']" flip="horizontal"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" flip="vertical"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" flip="both"></fa-icon>
尺寸:
<fa-icon [icon]="['fas', 'coffee']" size="xs"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" size="lg"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" size="6x"></fa-icon>
按角度偏转:
<fa-icon [icon]="['fas', 'coffee']" rotate="90"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" rotate="180"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" rotate="270"></fa-icon>
靠左或靠右排列:
<fa-icon [icon]="['fas', 'coffee']" pull="left"></fa-icon> <fa-icon [icon]="['fas', 'coffee']" pull="right"></fa-icon>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がAngular を使用して Font-Awesome を開く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
