Font Awesome 아이콘 넣기

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

Font Awesome 5버전

Host Font Awesome YourselfFont Awesome Docs Version 5

Font Awesome 다운받아 첨부하기

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

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

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

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

Font Awesome CDN으로 첨부하기

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

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

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

<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 아이콘 넣기

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

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

3. 예제 코드를 HTML에 복붙하시면 됩니다.

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

이러면 책 아이콘이 하나 나오게됩니다.

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

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

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