本篇文章给大家介绍一下什么是font awesome，以及angular项目中添加font awesome，使用font awesome图标库的方法，希望对大家有所助。
在这篇文章中，我们将研究如何在angular应用程序中使用font awesome，以及如何使用font awesome的图标动画和样式设计。【相关教程推荐：《angular教程》】
在我们进一步讨论之前，让我们先谈谈font awesome是什么。
font awesomefont 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-fontawesomenpm install @fortawesome/fontawesome-svg-corenpm install @fortawesome/free-brands-svg-iconsnpm install @fortawesome/free-regular-svg-iconsnpm install @fortawesome/free-solid-svg-icons# oryarn add @fortawesome/angular-fontawesomeyarn add @fortawesome/fontawesome-svg-coreyarn add @fortawesome/free-brands-svg-iconsyarn add @fortawesome/free-regular-svg-iconsyarn add @fortawesome/free-solid-svg-icons
在angular应用程序中使用font awesome图标在angular项目中使用font awesome有两个步骤。我们来看看这两点。
如何在组件层面上使用font awesome图标如何使用font awesome图标库如何在组件层面上使用font awesome图标这一步与在组件级使用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
如果我们看一下我们的网页，我们会看到facoffee 显示在屏幕上。这表明图标已经安装并成功导入。
如何使用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]="['fas', 'star']"></fa-icon> <fa-icon [icon]="['far', 'star']"></fa-icon></div>
如果我们现在加载网页，我们将看到星星图标被显示出来。
font awesome中的图标样式font awesome有四种不同的风格，我们来看看免费的图标--除去pro light图标，它使用前缀'fal' ，并有专业许可证。
实体图标使用前缀'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]="['fab', 'angular']" ></fa-icon>// to red<fa-icon [icon]="['fab', 'angular']" [styles]="{ stroke: 'red', color: 'red' }"></fa-icon>
当使用内联造型改变图标颜色和笔画时，我们必须利用fa-icon 属性。
接下来，我们要在angular中使用内联样式将图标的大小从小到大。要做到这一点，我们必须使用size 属性的fa-icon 。
<fa-icon [icon]="['fab', 'angular']" [styles]="{ stroke: 'red', color: 'red' }" size="xs" ></fa-icon> <fa-icon [icon]="['fab', 'angular']" [styles]="{ stroke: 'red', color: 'red' }" size="sm" ></fa-icon> <fa-icon [icon]="['fab', 'angular']" [styles]="{ stroke: 'red', color: 'red' }" size="lg" ></fa-icon> <fa-icon [icon]="['fab', 'angular']" [styles]="{ stroke: 'red', color: 'red' }" size="5x" ></fa-icon> <fa-icon [icon]="['fab', 'angular']" [styles]="{ stroke: 'red', color: 'red' }" 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]="['fab', 'react']" [styles]="{ stroke: 'blue', color: 'blue' }" size="10x"></fa-icon>
我们刚刚导入了react图标，现在我们要对它进行动画处理。在react图标组件上，添加font awesomespin loader属性。
<fa-icon [icon]="['fab', 'react']" [styles]="{ stroke: 'blue', color: 'rgb(0, 11, 114)' }" 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的详细内容。