Angular + FontAwesome을 5단계로 간단하게

Angular + FontAwesome을 5단계로 간단하게

단계별 각도 튜토리얼

FontAwesome은 인터넷에서 가장 인기 있는 아이콘 툴킷으로 처음부터 다시 디자인되고 제작되었습니다. 그 외에도 아이콘 글꼴 합자, SVG 프레임워크, React와 같은 인기 있는 프런트엔드 라이브러리를 위한 공식 NPM 패키지, 새로운 CDN에 대한 액세스와 같은 기능이 있습니다.

이 포스트에서는 fontawesome이 Angular에서 사용되도록 설정하는 방법을 단 5-1단계로 보여드리겠습니다.

이 단계에서는 특정Angular package을 사용하지 않고 fontawesome을 구성합니다. 향후 게시물에서는 훨씬 더 간단한 공식 패키지를 사용하여 구성할 것이며 동일한 Angular 생태계로 작업하는 fontawesome을 갖게 될 것입니다.

1단계(또는 0). 프로젝트 초기화

각도 프로젝트에서 fontawesome을 사용할 생각이라면 이미 초기화된 프로젝트가 있을 것입니다. 그러나이 자습서에서는 프로젝트를 처음부터 시작하겠습니다.

2단계. fontawesome 설치

fontawesome을 설치합니다.

3단계. fontawesome 포함

프로젝트에 fontawesome을 포함하는 방법에는 여러 가지가 있습니다.

angular.json을 열고 스타일 배열에 새 항목을 삽입합니다.

styles.scss를 열고 파일에 새 항목을 삽입합니다.

4단계. fontawesome CSS 클래스 추가

템플릿의 구성 요소를 열고 html 요소에 fontawesome CSS 클래스를 추가합니다.

5단계. 앱 실행!

앱 실행:

ng serve

더, 더, 더…

Fontawesome

이 게시물의 GitHub 분기는 https://github.com/Caballerog/angular-fontawesome-1입니다.


2019년 9월 3일 https://www.carloscaballero.io에 처음 게시되었습니다.