# Font Awesome 아이콘 넣기

웹개발하다보면 아이콘이 필요할때가 종종 있는데 그럴때 사용하는 라이브러리 입니다.





**Font Awesome 5버전**&#x20;

{% embed url="https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself" %}

&#x20;

&#x20;

**Font Awesome 다운받아 첨부하기**&#x20;

&#x20;

Font Awesome 홈페이지의 다운로드 메뉴에서 다운받아 압축을 풀면 여러개의 폴더가 나오는데,&#x20;

이 중에 CSS, Webfonts 두개의 폴더를 여러분 작업폴더에 복붙하시면 됩니다.&#x20;

그 후에 CSS 폴더 내의 all.css 라는 파일을 하나만 head 태그 안에 딱 첨부해주시면 설치 끝입니다. 나머지 잔챙이 CSS 파일은 다 삭제하셔도 됩니다.&#x20;

&#x20;

```html
<link href="all.min.css 파일 경로" rel="stylesheet">
```



**Font Awesome CDN으로 첨부하기**&#x20;

&#x20;

CSS파일을 호스팅해주는 고마운 사이트들이 있습니다.

이 사이트가 제공하는 all.min.css 파일을 link태그로 첨부하면 직접 다운받지 않고도 동일한 CSS파일을 이용가능합니다.&#x20;

구글에 font awesome 5 cdnjs 이런 식으로 검색하면 됩니다.&#x20;

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
```

장점 -  빠르고 간편함

단점 - 이 사이트가 다운되면 css 파일도 이용이 불가능해짐



**Font Awesome 아이콘 넣기**

&#x20;

1\. Font Awesome 5버전 홈페이지의 icons 메뉴로 들어가신 후&#x20;

2\. 마음에 드는 아이콘을 선택한 후

3\. 예제 코드를 HTML에 복붙하시면 됩니다.&#x20;

&#x20;

```html
<i class="fas fa-yin-yang" style="font-size:32px;"></i>
```

이러면 책 아이콘이 하나 나오게됩니다.&#x20;

사이즈나 색 수정은 글자 수정하는 것과 똑같이 하시면 됩니다.&#x20;

&#x20;

혹은 이런 방식으로도 사이즈 수정이 가능함

```html
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>
```

