Angular에서 Font Awesome을 추가하고 사용하는 방법에 대한 간략한 설명
- 青灯夜游앞으로
- 2021-07-19 10:46:022528검색
이 글에서는 Font Awesome이 무엇인지, Angular 프로젝트에 Font Awesome을 추가하고 Font Awesome 아이콘 라이브러리를 사용하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.
이 기사에서는 Angular 애플리케이션에서 Font Awesome을 사용하는 방법과 Font Awesome을 사용하여 아이콘에 애니메이션을 적용하고 스타일을 지정하는 방법을 살펴보겠습니다. [관련 튜토리얼 추천: "angular tutorial"]
더 논의하기 전에 먼저 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复制代码
Install Font Awesome dependency
이미 프로젝트가 있는 분들을 위해 여기에서 후속 조치를 취할 수 있습니다. 위 명령이 완료된 후 프로젝트 디렉터리에 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을 사용하는 데는 두 단계가 있습니다. 이 두 가지 점을 살펴보겠습니다.
- 구성 요소 수준에서 Font Awesome 아이콘을 사용하는 방법
- Font Awesome 아이콘 라이브러리를 사용하는 방법
구성 요소 수준에서 Font Awesome 아이콘을 사용하는 방법
이 단계는 구성 요소에서 Font Awesome 아이콘을 사용하는 것과 관련됩니다. 이는 아이콘이 필요한 모든 구성 요소에 아이콘을 가져오는 동시에 동일한 아이콘을 여러 번 가져오기 때문에 좋은 방법이 아닙니다.
애플리케이션을 구축할 때 구성 요소에서 아이콘을 사용해야 하는 경우를 대비해 구성 요소에서 아이콘을 사용하는 방법을 계속 살펴봐야 합니다.
Font Awesome을 설치한 후 아래와 같이 app.module.ts를 열고 FontAwesomeModule을 가져옵니다. 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'
// from black
<fa-icon [icon]="['fab', 'angular']" ></fa-icon>
// to red
<fa-icon
[icon]="['fab', 'angular']"
[styles]="{ stroke: 'red', color: 'red' }"
></fa-icon>그런 다음 app.comComponent.ts를 열고 사용하려는 아이콘 이름을 가져옵니다. faCoffee를 활용하고 싶다고 가정해 보겠습니다. 🎜 <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>🎜다음으로 faCoffee라는 변수를 만들고 가져온 아이콘을 app.comComponent.html에서 찾을 수 있도록 해당 변수에 할당합니다. 그렇게 하지 않으면 우리는 그것을 사용할 수 없습니다. 🎜<fa-icon
[icon]="['fab', 'react']"
[styles]="{ stroke: 'blue', color: 'blue' }"
size="10x"
></fa-icon>🎜이제 app.comComponent.html에서 다음 코드를 작성하세요. 🎜<fa-icon
[icon]="['fab', 'react']"
[styles]="{ stroke: 'blue', color: 'rgb(0, 11, 114)' }"
size="10x"
[spin]="true"
></fa-icon>🎜이 명령을 실행하여 애플리케이션을 제공하고 아이콘이 표시되는지 확인하세요. 🎜rrreee🎜저희 웹페이지를 살펴보시면 화면에 faCoffee가 표시되어 있는 것을 보실 수 있습니다. 이는 아이콘이 설치되었고 성공적으로 가져왔음을 나타냅니다. 🎜Font Awesome 아이콘 라이브러리 사용 방법 🎜🎜이것은 애플리케이션에서 Font Awesome을 사용하는 가장 좋은 방법입니다. 특히, 아이콘을 다시 가져오거나 아이콘을 여러 번 가져와야 합니다. 이 목표를 어떻게 달성하는지 살펴보겠습니다. 🎜🎜app.module.ts를 열고 다음 코드를 작성하세요. 🎜rrreee🎜이후에는 변수를 선언하고 사용하기 전에 해당 변수에 전달할 필요 없이 app.comComponent.html에서 직접 사용할 수 있습니다. 🎜rrreee🎜지금 웹 페이지를 로드하면 별표 아이콘이 표시되는 것을 볼 수 있습니다. 🎜Font Awesome의 아이콘 스타일 🎜🎜Font Awesome에는 네 가지 스타일이 있습니다. 무료 아이콘을 살펴보겠습니다. 접두어 'fal' 전문 라이센스를 취득하세요. 🎜
- 实体图标使用前缀
'fas' ，并从以下网站导入：@fortawesome/free-regular-svg-icons
- 普通图标使用前缀
'far' ，并从以下网站导入@fortawesome/free-solid-svg-icons
- 品牌图标使用前缀
'fab' ，并从以下网站导入。@fortawesome/free-brands-svg-icons
'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을 추가하고 사용하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!