반응형
Font Awesome은 다양한 아이콘을 간편하게 사용할 수 있는 라이브러리입니다.
약 1,600개의 무료 아이콘을 제공합니다.(유료는 약 8.000개) 사용법을 소개해 드립니다.
아래의 CSS 링크를 복사하여 <head></head> 사이에 삽입합니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/>
Font Awesome 사이트에 접속하여, 사용하고 싶은 아이콘을 검색합니다.
흐리게 표시되는 것은, 유료 전용 아이콘입니다. 사용할 아이콘을 선택합니다.
<i class="fas fa-dog"></i> 라고 쓰여 있는 1번을 누르면 소스코드 복사,
다운로드 아이콘이 그려진 2번을 누르면 SVG 파일로 다운받을 수 있습니다.
소스코드를 복사하여 원하는 곳에 붙여넣으면, 아이콘을 사용할 수 있습니다.
Font Awesome Docs를 참고하면 다양한 사용법을 확인할 수 있습니다.
예제 몇 개를 밑에 추가하였으니, 보시고 참고하세요
See the Pen Font Awesome 예제 by jess (@jess44) on CodePen.
더 많은 사용법은 Font Awesome Docs를 참고하세요.
반응형
'개발 > CSS' 카테고리의 다른 글
| CSS position 속성 - CSS 위치 지정 (0) | 2021.01.04 |
|---|---|
| 요소의 배치 순서 지정 - z-index (0) | 2021.01.04 |
| Google Fonts - 구글 무료 폰트 사이트 (0) | 2021.01.03 |
| hr 태그 - 수평선 / 문단 나누는 선 넣기 (0) | 2021.01.03 |
| ul, li 블릿,기호,점 스타일 변경 및 없애기 (0) | 2021.01.03 |
댓글