Angular+Font-Awesome 단계에 대한 자세한 설명

이번에는 Angular+Font-Awesome의 단계에 대해 자세히 설명하고, Angular+Font-Awesome 사용 시 주의사항은 무엇인지 알아보겠습니다.

머리말

이 글에서는 Font-Awesome을 Angular 자세로 여는 것과 관련된 내용을 주로 소개하고 참고 및 학습을 위해 공유합니다. 아래에서는 자세히 설명하지 않겠습니다. 자세한 소개 .

Environment

• Angular: v5.2.9

• Font-Awesome: v5.0.10

• angular-fontawesome: v0.1.0-9

사용할 필요가 없습니다. 더 이상 전통 웹 글꼴 방식

저는 Font-Awesome의 전통적인 방식에 익숙했습니다. 참조 페이지 하단에 있는 글꼴-awesome.min.css 파일을 사용하고 <i class="fa xxx"></i> 를 사용하여 페이지의 아이콘 - 이것은 Angular에서 여전히 가능하지만 Angular는 아닙니다. 실제로 Angular 모듈 구성 요소를 사용하여 구현할 수 있습니다. 이 글을 쓰는 시점에서 Package for Angular는 공식 웹사이트에 공식적으로 출시되지 않았지만 공식 GitHub에 이미 관련 문서 튜토리얼이 있습니다. 이 글의 다음 내용은 기본적으로 공식 문서를 따릅니다.

Installation Package

　npm 방법:

$ npm install @fortawesome/fontawesome-svg-core --save
$ npm install @fortawesome/free-solid-svg-icons --save
$ npm install @fortawesome/angular-fontawesome --save

그중 "free-solid-svg-icons"가 고전적인 스타일이고 "일반" 및 "라이트" 옵션이 있습니다:

$ 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가 붙어야 하며 camelCase 명명법을 사용해야 합니다. 가져온 후 다음과 같은 방법으로 html 템플릿의 아이콘을 사용할 수 있습니다.

<fa-icon [icon]="myIcon"></fa-icon>

아이콘 이름은 html 템플릿에서 직접 사용해야 합니다. 아이콘은 공식 웹사이트 아이콘 라이브러리에서 찾을 수 있습니다.

온디맨드 사용법 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 템플릿에서 직접 사용할 수 있습니다.

가져오기 풀세트

평균 크기의 웹사이트의 경우, 그래도 아이콘을 모두 가져오고 원하는 것을 사용하는 것이 좋습니다. 이름을 검색하여 하나씩 가져오는 것보다 편리합니다. 완전한 가져오기 방법은 아이콘 이름을 아이콘 패키지의 별칭으로 바꾸는 것입니다:

// 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>

은 실제로 간단한 작성 방법입니다. 기본적으로 fas 스타일 아이콘을 사용합니다. Far 또는 Fab를 원할 경우 다음과 같이 작성해야 합니다.

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

배열의 첫 번째 요소에 접두사로 스타일 패키지 별칭을 입력합니다. 나는 이런 정확한 글쓰기 방법을 추천한다.

기본 아이콘 특수 효과

　Font-Awesome에는 HTML 태그

속성을 통해 얻을 수 있는 훌륭한 아이콘 특수 효과도 많이 있습니다. 다음은 문서에서 직접 복사한 몇 가지 기본 사용법입니다.

회전 및 펄스 회전:

<fa-icon [icon]="[&#39;fas&#39;, &#39;spinner&#39;]" [spin]="true"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;spinner&#39;]" [pulse]="true"></fa-icon>

고정 너비:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" [fixedWidth]="true"></fa-icon>

테두리:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" [border]="true"></fa-icon>

翻转:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="horizontal"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="vertical"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="both"></fa-icon>

尺寸:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="xs"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="lg"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="6x"></fa-icon>

按角度偏转:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="90"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="180"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="270"></fa-icon>

靠左或靠右排列:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" pull="left"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" pull="right"></fa-icon>

总结

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue组件实现简单弹窗功能案例详解

swiper操作图片步骤详解

위 내용은 Angular+Font-Awesome 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!