Angular で Font Awesome を追加して使用する方法についての簡単な説明

この記事では、Font Awesome とは何か、および Font Awesome を Angular プロジェクトに追加し、Font Awesome アイコン ライブラリを使用する方法を紹介します。

この記事では、Angular アプリケーションで Font Awesome を使用する方法と、Font Awesome を使用してアイコンをアニメーション化およびスタイル設定する方法について説明します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

さらに説明する前に、まず Font Awesome とは何かについて説明しましょう。

Font Awesome

Font Awesome は、1500 個を超える非常に使いやすい無料アイコンを備えたアイコン ツールキットです。これらのアイコンはスケーラブルなベクターを使用して作成され、適用されると CSS の寸法と色を継承します。これにより、どのような画面サイズでも適切に機能する高品質のアイコンになります。

Angular 5 がリリースされる前に、開発者は Font Awesome パッケージをインストールし、Angular プロジェクトでその CSS を参照して使用する必要があります。

しかし、Angular 5 のリリースにより、Font Awesome 用の Angular コンポーネントを作成することで、プロジェクトに Font Awesome を実装することが簡単になりました。この機能を使用すると、Font Awesome をプロジェクトにきれいに統合できます。

Font Awesome アイコンのスケーラビリティにより、テキストとインラインでうまく調和します。この記事では、Font Awesome アイコンのアニメーション、カラーリング、サイズ変更の使用方法を詳しく見ていきます。

デモ Angular アプリケーションの作成

このチュートリアル用のデモ Angular アプリケーションを作成しましょう。ターミナルを開き、CD でプロジェクト ディレクトリに移動し、次のコマンドを実行します。

このコマンドを実行する前に、Node.js がシステムにインストールされており、Angular CLI もインストールされていることを確認してください。

ng new angular-fontawesome复制代码

Font Awesome 依存関係のインストール

すでにプロジェクトをお持ちの方は、ここからフォローアップできます。上記のコマンドが完了したら、CD をプロジェクト ディレクトリに移動し、次の Font Awesome アイコン コマンドをインストールします。

npm install @fortawesome/angular-fontawesome
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-solid-svg-icons

# or

yarn add @fortawesome/angular-fontawesome
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-solid-svg-icons

Angular アプリケーションで Font Awesome アイコンを使用する

Angular プロジェクトで Font Awesome を使用するには 2 つの手順があります。この2点について見ていきましょう。

1. コンポーネント レベルで Font Awesome アイコンを使用する方法
2. Font Awesome アイコン ライブラリを使用する方法

コンポーネント レベルで Font Awesome アイコンを使用する方法level

この手順は、コンポーネント レベルで Font Awesome アイコンを使用することに関係しています。これは、アイコンを必要とするすべてのコンポーネントにアイコンをインポートし、同じアイコンを複数インポートする必要があるため、良いアプローチではありません。回。

アプリケーションを構築するときにコンポーネントでアイコンを使用する必要がある場合に備えて、コンポーネントでのアイコンの使用方法を検討する必要があります。

Font Awesome をインストールした後、以下に示すように、app.module.ts を開いて FontAwesomeModule をインポートします。

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule
  ],

その後、app.component.ts を開いて、使用するアイコン名をインポートします。 faCoffee を活用したいとします。

import { faCoffee } from '@fortawesome/free-solid-svg-icons';复制代码

次に、faCoffee という変数を作成し、インポートしたアイコンをその変数に割り当てて、app.component.html## で使用できるようにします。# で使用します。そうしないと使えません。

faCoffee = faCoffee;

次に、

app.component.html に次のコードを記述します。

<div>
    <fa-icon [icon]="faCoffee"></fa-icon>
</div>

このコマンドを実行してアプリケーションを提供し、アイコンが表示されているかどうかを確認します。

ng serve

Web ページを見ると、画面に

faCoffee が表示されていることがわかります。これは、アイコンがインストールされ、正常にインポートされたことを示します。

Font Awesome アイコン ライブラリの使用方法

これは、アプリケーションで Font Awesome を使用するための最良の方法です。特に、アイコンやアイコンを再インポートせずにすべてのコンポーネントで Font Awesome を使用したい場合に最適です。アイコンを複数回インポートする場合。この目標をどのように達成するかを見てみましょう。

app.module.ts を開き、次のコードを記述します。

import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons';

export class AppModule { 
  constructor(library: FaIconLibrary) {
    library.addIcons(fasStar, farStar);
  }
}

その後、変数を宣言して使用する前にその変数に渡すことなく、

app.component.html で直接使用できます。

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

ここで Web ページをロードすると、星のアイコンが表示されることがわかります。

Font Awesome のアイコン スタイル

Font Awesome には 4 つの異なるスタイルがあります。無料のアイコンを見てみましょう。プレフィックス

'fal を使用する Pro ライト アイコンは除きます。 ' そしてプロのライセンスを持っています。

• 实体图标使用前缀'fas' ，并从以下网站导入：@fortawesome/free-regular-svg-icons
• 普通图标使用前缀'far' ，并从以下网站导入@fortawesome/free-solid-svg-icons
• 品牌图标使用前缀'fab' ，并从以下网站导入。@fortawesome/free-brands-svg-icons

接下来，让我们看看我们还能用Font Awesome图标做什么。

不用写CSS样式就能改变图标的颜色和大小

让我们来看看我们如何在Angular中不写CSS样式就能改变Font Awesome图标的颜色。

这种方法有助于我们在组件层面上使用图标。然而，当在所有的组件中使用这种方法时，它是没有帮助的，因为它将改变我们项目中所有组件的图标颜色。对于多个组件，我们可以只用一个CSS类或样式属性来改变它一次。

但是，当我们在一个组件层面上工作时，我们可以使用它，因为我们将只在该组件中使用该图标，而不是为它创建一个CSS属性并在CSS文件中设置样式。因此，让我们看看我们如何在Angular项目中做到这一点。默认情况下，下面的图标是black ，我们想把它改成red 。

// from black
<fa-icon [icon]="[&#39;fab&#39;, &#39;angular&#39;]" ></fa-icon>

// to red
<fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
></fa-icon>

当使用内联造型改变图标颜色和笔画时，我们必须利用fa-icon 属性。

接下来，我们要在Angular中使用内联样式将图标的大小从小到大。要做到这一点，我们必须使用size 属性的fa-icon 。

    <fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
      size="xs"
    ></fa-icon>

    <fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
      size="sm"
    ></fa-icon>

    <fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
      size="lg"
    ></fa-icon>

    <fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
      size="5x"
    ></fa-icon>

    <fa-icon
      [icon]="[&#39;fab&#39;, &#39;angular&#39;]"
      [styles]="{ stroke: &#39;red&#39;, color: &#39;red&#39; }"
      size="10x"
    ></fa-icon>

默认情况下，Font Awesome图标会继承父容器的大小。它允许它们与我们可能使用的任何文本相匹配，但如果我们不喜欢默认的尺寸，我们必须给它们我们想要的尺寸。

我们使用xs,sm,lg,5x, 和10x 等类。这些类将图标的大小增加和减少到我们想要的程度。

动画化Font Awesome图标

让我们也来看看我们如何在不使用Angular中的CSS或动画库的情况下对Font Awesome图标进行动画。

作为一个开发者，当用户点击一个提交按钮或页面正在加载时，我们可能想显示一个加载器或旋转器的效果，告诉用户有东西正在加载。

我们可以使用Font Awesome图标来达到这个目的。我们不需要导入一个外部的CSS动画库，而只需要在图标标签上添加Font Awesomespin 属性。

这样做可以避免我们下载一个完整的CSS动画库，而最终使用一个旋转的效果或使用关键帧编写一个长的CSS动画。

因此，让我们来看看我们如何通过使用React图标来实现这一点。

<fa-icon
      [icon]="[&#39;fab&#39;, &#39;react&#39;]"
      [styles]="{ stroke: &#39;blue&#39;, color: &#39;blue&#39; }"
      size="10x"
></fa-icon>

我们刚刚导入了React图标，现在我们要对它进行动画处理。在React图标组件上，添加Font Awesomespin loader属性。

<fa-icon
      [icon]="[&#39;fab&#39;, &#39;react&#39;]"
      [styles]="{ stroke: &#39;blue&#39;, color: &#39;rgb(0, 11, 114)&#39; }"
      size="10x"
      [spin]="true"
></fa-icon>

当我们加载网页时，我们会看到React图标在无限地旋转。这是因为我们把spin 属性设置为true 。

总结

在这篇文章中，我们能够看到如何在Angular项目中使用Font Awesome图标，如何添加图标库中的一些基本样式，以及如何对图标进行动画处理。

我们还可以用Font Awesome图标做更多的事情，比如固定宽度图标、旋转图标、Power Transforms和组合两个图标。Font Awesome的教程可以教你更多关于如何在你的项目中使用这些工具。

如果你觉得这篇文章有帮助，请与你的朋友分享。

英文原文地址：https://blog.logrocket.com/how-to-add-font-awesome-angular-project/

更多编程相关知识，请访问：编程视频！！

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