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 ファイルをページの下部に配置し、 を使用してアイコンを配置ページ内 - これは 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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











マグネット リンクは、リソースをダウンロードするためのリンク方法であり、従来のダウンロード方法よりも便利で効率的です。マグネット リンクを使用すると、中間サーバーに依存せずに、ピアツーピア方式でリソースをダウンロードできます。この記事ではマグネットリンクの使い方と注意点を紹介します。 1. マグネット リンクとは? マグネット リンクは、P2P (Peer-to-Peer) プロトコルに基づくダウンロード方式です。ユーザーはマグネット リンクを通じてリソースの発行者に直接接続し、リソースの共有とダウンロードを完了できます。従来のダウンロード方法と比較して、磁気

mdf ファイルと mds ファイルの使用方法 コンピューター技術の継続的な進歩により、さまざまな方法でデータを保存および共有できるようになりました。デジタル メディアの分野では、特殊なファイル形式に遭遇することがよくあります。この記事では、一般的なファイル形式である mdf および mds ファイルについて説明し、その使用方法を紹介します。まず、mdf ファイルと mds ファイルの意味を理解する必要があります。 mdf は CD/DVD イメージ ファイルの拡張子で、mds ファイルは mdf ファイルのメタデータ ファイルです。

CrystalDiskMark は、シーケンシャルおよびランダムの読み取り/書き込み速度を迅速に測定する、ハード ドライブ用の小型 HDD ベンチマーク ツールです。次に、編集者が CrystalDiskMark と Crystaldiskmark の使用方法を紹介します。 1. CrystalDiskMark の概要 CrystalDiskMark は、機械式ハード ドライブとソリッド ステート ドライブ (SSD) の読み取りおよび書き込み速度とパフォーマンスを評価するために広く使用されているディスク パフォーマンス テスト ツールです。 ). ランダム I/O パフォーマンス。これは無料の Windows アプリケーションで、使いやすいインターフェイスとハード ドライブのパフォーマンスのさまざまな側面を評価するためのさまざまなテスト モードを提供し、ハードウェアのレビューで広く使用されています。

foobar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能 デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供 シンプルでわかりやすく、使いやすいインターフェースデザイン 過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください

Angular.js は、動的アプリケーションを作成するための無料でアクセスできる JavaScript プラットフォームです。 HTML の構文をテンプレート言語として拡張することで、アプリケーションのさまざまな側面を迅速かつ明確に表現できます。 Angular.js は、コードの作成、更新、テストに役立つさまざまなツールを提供します。さらに、ルーティングやフォーム管理などの多くの機能も提供します。このガイドでは、Ubuntu24 に Angular をインストールする方法について説明します。まず、Node.js をインストールする必要があります。 Node.js は、ChromeV8 エンジンに基づく JavaScript 実行環境で、サーバー側で JavaScript コードを実行できます。ウブにいるために

クラウド ストレージは今日、私たちの日常生活や仕事に欠かせない部分になっています。中国有数のクラウド ストレージ サービスの 1 つである Baidu Netdisk は、強力なストレージ機能、効率的な伝送速度、便利な操作体験により多くのユーザーの支持を得ています。また、重要なファイルのバックアップ、情報の共有、オンラインでのビデオの視聴、または音楽の聴きたい場合でも、Baidu Cloud Disk はニーズを満たすことができます。しかし、Baidu Netdisk アプリの具体的な使用方法を理解していないユーザーも多いため、このチュートリアルでは Baidu Netdisk アプリの使用方法を詳しく紹介します。まだ混乱しているユーザーは、この記事に従って詳細を学ぶことができます。 Baidu Cloud Network Disk の使用方法: 1. インストール まず、Baidu Cloud ソフトウェアをダウンロードしてインストールするときに、カスタム インストール オプションを選択してください。

NetEase Mailbox は、中国のネットユーザーに広く使用されている電子メール アドレスとして、その安定した効率的なサービスで常にユーザーの信頼を獲得してきました。 NetEase Mailbox Master は、携帯電話ユーザー向けに特別に作成された電子メール ソフトウェアで、電子メールの送受信プロセスが大幅に簡素化され、電子メールの処理がより便利になります。 NetEase Mailbox Master の使い方と具体的な機能について、以下ではこのサイトの編集者が詳しく紹介しますので、お役に立てれば幸いです。まず、モバイル アプリ ストアで NetEase Mailbox Master アプリを検索してダウンロードします。 App Store または Baidu Mobile Assistant で「NetEase Mailbox Master」を検索し、画面の指示に従ってインストールします。ダウンロードとインストールが完了したら、NetEase の電子メール アカウントを開いてログインします。ログイン インターフェイスは次のとおりです。

スピーカーの再生ボタンを長押し後、ソフトウェア内でWi-Fiに接続すると使用可能になります。チュートリアル 該当するモデル: Xiaomi 12 システム: EMUI11.0 バージョン: Xiaoai Classmate 2.4.21 分析 1 まずスピーカーの再生ボタンを見つけ、長押ししてネットワーク配信モードに入ります。 2 携帯電話の Xiaoai Speaker ソフトウェアで Xiaomi アカウントにログインし、クリックして新しい Xiaoai Speaker を追加します。 3. Wi-Fi の名前とパスワードを入力した後、Xiao Ai に電話して使用することができます。補足: Xiaoai Speakerにはどのような機能がありますか? 1 Xiaoai Speakerには、システム機能、ソーシャル機能、エンターテイメント機能、ナレッジ機能、ライフ機能、スマートホーム、トレーニングプランがあります。概要/注意事項: 簡単に接続して使用するには、Xiao Ai アプリを事前に携帯電話にインストールしておく必要があります。
