Home IT/WEB Font Awesome 5 사용법, 자신의 웹페이지에 Icon을 추가하는 방법

Font Awesome 5 사용법, 자신의 웹페이지에 Icon을 추가하는 방법

Font Awesome 웹에서 아이콘을 쉽게 사용할 수 있는 라이브중에 하나입니다. 문서에 아이콘을 많이 사용하실 경우 Font Awesome 라이브러리를 추가하여 웹페이지에 사용하시거나 SVG 형태의 파일로도 제공하고 있으니 디자인 하실 때 사용할 수도 있습니다. Font Awesome 5 사용법을 알아보겠습니다.

Font Awesome 유/무료

inline ad

font Awesome 은 무료/유료 나눠서 사용할 수 있습니다. free 버전은 1,588개의 아이콘을 사용가능하고 월 10k pageview, Standard는 년 99달러에 월 1M pageviews 를 사용할 수 있어요. 무료버전은 월 10000 개 Pageview 이상으로는 노출 할 수 없다는 건 처음 알게 됐네요. 모든 페이지에 아이콘을 사용하지 않으면 무료로 충분하게 사용할 수 있을 거라 생각됩니다. 아니면 svg 로 변환해서 사용할 수 있는 방법도 있으니까 굳이 유료로 안하셔도 될 거 같습니다. 다른데 비용 나가는것도 많잖아요.

Free

Standard

font awesome 유/무료 스펙

Font Awesome 설치하기

font awesome 은 웹에서도 이용가능하지만 데스크탑에서도 아이콘을 사용할 수 있게 제공합니다. 데스크탑 버전을 다운 받아 보니 svg, ttf 파일을 제공하고 있네요. 우리는 웹에서 사용하는 방법으로 설치해보겠습니다.

font awesome – other ways to use

우선 아래의 파일을 다운로드 받거나 해당 페이지에 가서 다운로드 받으시면 됩니다. 링크 앞에 아이콘이 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을 사용하실 때 이미지를 추가하지 않고 라이브러리에서 바로 사용할 수 있으면 빨리 문서를 작성할 수 있을 거에요. 꼭 추가하셔서 사용해보세요.

RECENT POSTS

After Effects 엥커포인트 중앙으로 이동하는 방법 및 스크립트

After Effects 에서 애니메이션을 하기 위해서는 움직이는 대상의 Anchor Point 에 따라서 크기나 위치, 회전 등의 차이가 있습니다. After Effect 에서는 Layer content 에...

제주도 도로교통상황, 통제상황 및 이번주 제주도 날씨 2023-01-25

제주도로교통상황 한라산 탐방은 현재 전면 통제중이며 제주시와 서귀포시를 잇는 1100도로, 5.16도로 전 구간은 전차량 통제상황, 소형차의 경우 제1산록도로가 통제 상황입니다. 제주교통통제상황: https://www.jjpolice.go.kr/jjpolice/notice/traffic.htm ...

[EPIC GAME] Horizon Chase Turbo 2022.12.18 까지 무료 다운로드

Horizon Chase Turbo 를 2022.12.18일 01:00 까지 EPIC GAME 에서 무료로 다운 받을 수 있습니다. 오락실 자동차와 같은 레이싱 게임입니다. https://store.epicgames.com/ko/p/horizon-chase-turbo https://www.youtube.com/watch?v=5LMugZ300L8 Horizon Chase Turbo Horizon Chase Turbo는...

제주도로교통상황 및 이번주 제주도 날씨 2022-12-17 현재

제주도로교통상황 한라산 탐방은 현재 전명 통제중이며 제주시와 서귀포시를 잇는 1100도로 전 구간은 통제상황입니다. 5.16도로 마방목지~성판악 / 성판악~숲터널 구간은 소형 자량인 경우 체인을 설치해야만 운행 가능합니다. 제주지방기상청은...