Font Awesome 웹에서 아이콘을 쉽게 사용할 수 있는 라이브중에 하나입니다. 문서에 아이콘을 많이 사용하실 경우 Font Awesome 라이브러리를 추가하여 웹페이지에 사용하시거나 SVG 형태의 파일로도 제공하고 있으니 디자인 하실 때 사용할 수도 있습니다. Font Awesome 5 사용법을 알아보겠습니다.
Font Awesome 유/무료
font Awesome 은 무료/유료 나눠서 사용할 수 있습니다. free 버전은 1,588개의 아이콘을 사용가능하고 월 10k pageview, Standard는 년 99달러에 월 1M pageviews 를 사용할 수 있어요. 무료버전은 월 10000 개 Pageview 이상으로는 노출 할 수 없다는 건 처음 알게 됐네요. 모든 페이지에 아이콘을 사용하지 않으면 무료로 충분하게 사용할 수 있을 거라 생각됩니다. 아니면 svg 로 변환해서 사용할 수 있는 방법도 있으니까 굳이 유료로 안하셔도 될 거 같습니다. 다른데 비용 나가는것도 많잖아요.
Free
- 1,588 Free Icons
- 1 Style + Brands
- 1 Hosted Kit
- 10k Pageviews/mo
Standard
- 7,842 Pro Icons
- 4Styles + Brands
- 20Hosted Kits
- 1MPageviews/mo
- 5Seats + $20/extra
Font Awesome 설치하기
font awesome 은 웹에서도 이용가능하지만 데스크탑에서도 아이콘을 사용할 수 있게 제공합니다. 데스크탑 버전을 다운 받아 보니 svg, ttf 파일을 제공하고 있네요. 우리는 웹에서 사용하는 방법으로 설치해보겠습니다.
우선 아래의 파일을 다운로드 받거나 해당 페이지에 가서 다운로드 받으시면 됩니다. 링크 앞에 아이콘이 font awesome icon 적용시킨 것입니다.
FONT AWESOME 다운로드https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
다운받으시면 많은 파일이 있는데 그 중에서 all.min.js 파일을 자신 서버의 경로에 복사하신 후 <head> 안에 다음과 같은 코드를 추가해주시면 됩니다. 저는 워드프레스를 사용하기 있기 때문에 자식테마 안에 function.php 에 파일을 추가해줬습니다.
- 일반 웹페이지
<head> <script src="/wp-content/themes/Newspaper-child/assets/js/all.js"></script> </head>
- 워드프레스 function.php 에서 css, js 를 관리하시는 경우 아래와 같이 작성해주시면 됩니다.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
// js
wp_enqueue_script( 'fontawesome', get_stylesheet_directory_uri() . '/assets/js/all.min.js', array('jquery'));
}CDN을 이용하여 설치하신다면 아래의 방법으로 라이브러리를 추가할 수 있습니다. CDN을 이용하면 파일 추가할 필요없이 쉽게 사용을 할 수 있지만 웹서버가 다른 나라에 있을 수 있기 때문에 속도 저하 문제가 있을 수 있습니다. 그래서 저는 자신의 서버에 파일을 추가해서 하는 방식을 추천드립니다.
<head> <script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script> </head>
이제 설치는 완료했고 Font Awesome 5 아이콘을 사용해보겠습니다.
Font Awesome icon 사용하기
아래 URL 로 이동하여 자신의 원하는 아이콘을 선택합니다. 저는 youtube 라고 검색을 해서 찾았습니다. 그리고 짙은 아이콘 모양을 클릭합니다. 옅은 그레이로 표시된 아이콘은 유료 아이콘 입니다.
https://fontawesome.com/icons?d=gallery
클릭해서 이동한 페이지에서 아래 그림의 코드를 선택하면 코드가 복사됩니다.
<i class=”fab fa-youtube”></i>
복사한 코드를 html 문서에 붙여넣기만 하면 아이콘이 생성됩니다.
Font Awesome icon 크기 조절
크기 옵션도 있는데 fa-xs에서 fa-10x 까지 사용 가능하며 css 로도 px로 조절가능합니다.
<i class="fab fa-youtube"></i> <i class="fab fa-youtube fa-xs"></i> <i class="fab fa-youtube fa-sm"></i> <i class="fab fa-youtube fa-lg"></i> <i class="fab fa-youtube fa-2x"></i> <i class="fab fa-youtube fa-3x"></i> <i class="fab fa-youtube fa-5x"></i> <i class="fab fa-youtube fa-7x"></i> <i class="fab fa-youtube fa-10x"></i>
Font Awesome Document 페이지로 들어가시면 다양한 옵션들로 아이콘을 제어가 가능합니다.
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Font Awesome icon animation
아래 코드를 사용하시면 animation 줄 수도 있습니다.
<div class="fa-5x"> <i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i> <i class="fas fa-cog fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i> <i class="fas fa-stroopwafel fa-spin"></i> </div>
지금까지 Font Awesome 5 사용법에 대해서 알아보았습니다. font awesome 아이콘은 많은 사람들이 사용하고 무료로 이동 가능하다는 점이 장점입니다. 여러분들의 웹페이지에 라이브러리를 import 하셔서 icon을 사용하실 때 이미지를 추가하지 않고 라이브러리에서 바로 사용할 수 있으면 빨리 문서를 작성할 수 있을 거에요. 꼭 추가하셔서 사용해보세요.