개발/CSS

Font Awesome 사용하기 - css 아이콘 사용

알 수 없는 사용자 2021. 1. 3.

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를 참고하면 다양한 사용법을 확인할 수 있습니다.

예제 몇 개를 밑에 추가하였으니, 보시고 참고하세요

더 많은 사용법은 Font Awesome Docs를 참고하세요.

댓글