A brief discussion on how to add and use Font Awesome in Angular

This article will introduce to you what Font Awesome is, and how to add Font Awesome to the Angular project and use the Font Awesome icon library. I hope it will be helpful to everyone.

In this article, we will look at how to use Font Awesome in an Angular application and how to animate and style icons using Font Awesome. [Related tutorial recommendations: "angular tutorial"]

Before we discuss further, let us first talk about what Font Awesome is.

Font Awesome

Font Awesome is an icon toolkit with more than 1500 free icons that is very easy to use. These icons are created using scalable vectors and inherit the dimensions and colors of CSS when applied to them. This makes them high-quality icons that work well on any screen size.

Before Angular 5 is released, developers must install the Font Awesome package and reference its CSS in Angular projects to use it.

But the release of Angular 5 has made it easy to implement Font Awesome in our projects by creating Angular components for Font Awesome. With this feature, Font Awesome can be integrated cleanly into our projects.

Due to the scalability of Font Awesome icons, they blend well inline with text. In this article, we’ll take a closer look at using animation, coloring, and sizing for Font Awesome icons.

Create a demo Angular application

Let us create a demo Angular application for this tutorial. Open your terminal, CD to the project directory, and run the following command.

Before you run this command, make sure that Node.js is installed on your system and Angular CLI is also installed.

ng new angular-fontawesome复制代码

Installing Font Awesome dependencies

For those of you who already have a project, we can follow up from here. After the above command is completed, CD to the project directory and install the following Font Awesome icon command.

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

Using Font Awesome icons in Angular applications

There are two steps to using Font Awesome in Angular projects. Let’s look at these two points.

1. How to use Font Awesome icons at the component level
2. How to use Font Awesome icon library

How to use Font Awesome icons at the component level

This step has to do with using Font Awesome icons at the component level, which is not a good approach because it involves us importing the icon into every component that requires the icon, and also importing the same icon multiple times.

We still have to look at how to use icons in a component, in case we need to use icons in a component when building an application.

After installing Font Awesome, open app.module.ts and import FontAwesomeModule, as shown below.

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

After that, open app.component.ts and import the icon name you want to use. Let's say we want to leverage faCoffee.

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

Next, we create a variable called faCoffee and assign our imported icon to that variable so it can be used in app.component.html## Use it in #. If we don't do this, we can't use it.

faCoffee = faCoffee;

Now, in

app.component.html, write the following code.

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

Run this command to serve our application and check if our icon is showing.

ng serve

If we take a look at our web page, we will see

faCoffee displayed on the screen. This indicates that the icon has been installed and successfully imported.

How to use Font Awesome icon library

This is the best way for us to use Font Awesome in our application, especially when we want to use it in all components without re-importing icon or when importing an icon multiple times. Let's see how we achieve this goal.

Open

app.module.ts and write the following code.

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);
  }
}

After that, we can use it directly in

app.component.html without declaring a variable and passing it to that variable before using it.

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

If we load the web page now, we will see the star icon being displayed.

Icon Styles in Font Awesome

Font Awesome comes in four different styles, let's take a look at the free icons -- minus the Pro light icon, which uses the prefix

'fal' and have a professional license.

• 实体图标使用前缀'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/

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

The above is the detailed content of A brief discussion on how to add and use Font Awesome in Angular. For more information, please follow other related articles on the PHP Chinese website!