[HTML/CSS] 폰트어썸 (Font Awesome) 사용하기

폰트어썸

기존에 사용하던 아이콘 이미지들을 아이콘폰트라는 개념으로 만들어 사용 할 수 있게해

수정 시 보다 편리해짐

 

폰트어썸의 장점

• 용량 문제가 없음
• CSS 로 사이즈나 컬러가 변경가능해 수정이 쉬움
• 벡터이미지로 해상도문제가 없음

 

---

 

폰트어썸 사용방법

 

1. 폰트어썸 설치하기

- 다운로드해서 연결하기

https://fontawesome.com/ 해당 사이트에서 압축 파일을 다운받고 그 중 all.css 를 link 태그로 연결하기

Font Awesome

 

 

- CDN으로 연결하기

사이트에 회원가입 후 코드를 입력하고 CDN 링크를 받아 link태그로 연결하기

 

TIP!
- 폰트어썸 설치 시 최신 파일 보다 안정화된 파일인지가 중요
- 사용하는 아이콘과 버전이 맞는지 꼭 체크할 것

 

2. 폰트어썸 사용하기

- 코드 복사 붙여 넣기

사용하고자 하는 아이콘을 선택하면 나오는 i 태그로 된 코드를 html에서 원하는 위치에 넣어주면 됨

 

예시

<i class="fas fa-acorn"></i>

TIP!
폰트어썸은 버전마다 사용되는 클래스명이 다름

 

- 유니코드 사용하기

아이콘 선택 시 나오는 유니코드를 선택하면 복사됨

fa-스타일에 &#x 유니코드 ; 작성

<i class="fa fa-2x">&#x42;</i>

 

3. 폰트어썸 수정하기

폰트어썸의 강점 : css로 수정이 가능함

i 태그나 클래스명, 아이디명으로 아이콘을 선택해 css로 꾸밈

 

관련 속성

속성	효과	기타
font-size	아이콘의 크기 변경	폰트 개념으로 폰트 관련 속성으로 사이즈 조절
color	컬러변경
background	아이콘 배경 변경

 

---

 

참조 자료

https://fontawesome.com/

https://fontawesome.com/docs/web/style/styling