Font Awesome (폰트오썸) 무료 아이콘 이용하기

무료 아이콘 쓸때 아주 유용한 폰트오썸 ( FontAwesome ) 을 이용해 보자.

최근에는 FontAwesome5 버전이 나왔다.

https://fontawesome.com/

Font Awesome

안에 들어가서 상단에 icon 메뉴로 들어간다. free 버전과 유료버전을 선택하여 각각 이용해 볼 수 있다.

나는 일단 관련 css 라이브러리를 다운받아서 이용해 보도록 하겠다.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

 

다운받으면 압축파일로 되어 있는데, 이를 풀도록 하자.

 

위에서 fontawesome-free-5.12.0-web 폴더를 내호스팅 root 에 올리고 폴더명을 간단히 fontawesome 으로 변경해 놓았다.

 

기본사용법은 다음과 같다.

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

이제 내가 원하는 아이콘의 소스를 찾아서 붙여 놓기하여 화면에 띄워보자. 

 

<link rel="stylesheet" type="text/css" href="./font-awesome/css/all.css">
 
캘린더 아이콘
<span class="far fa-calendar-alt"></span>
<br>
 
악수
<i class="far fa-handshake"></i>
<br>
 
비둘기
<i class="fas fa-dove"></i>
<br>
 
나뭇잎
<i class="fas fa-leaf"></i>
<br>
 
전화기
<i class="fas fa-phone-volume" aria-hidden="true"></i>