ホームページ > 記事 > ウェブフロントエンド > Angular+Font-Awesome 手順の詳細な説明
Angular+Font-Awesome 手順の詳細な説明
- php中世界最好的语言オリジナル
- 2018-04-27 11:50:582486ブラウズ
今回は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]="['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 サイトの他の関連記事を参照してください。