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

패키지 설치

　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

기본 모듈

// ...
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
 // ...
 imports: [
 // ...
 FontAwesomeModule
 ],
 // ...
})
// ...

을 app.module.ts로 가져옵니다. 일단 가져온 후에는 다른 구성 요소에서 반복해서 가져올 필요가 없습니다. 이는 다음과 같은 아이콘 사용 방법의 기초입니다.

주문형 방법 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>

Border:

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

Flip:

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

Size:

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

Leave 왼쪽 또는 오른쪽 정렬:

<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+webpack을 사용하여 프로젝트 만드는 방법(코드 포함)

vue.js 데이터 바인딩 작동 방법

위 내용은 Angular를 사용하여 Font-Awesome을 여는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!