본문 바로가기
CSS

Font Awesome의 사용법: 웹 아이콘 폰트를 사용

다한랑사 2021. 11. 8.

Font Awesome의 사용법: 웹 아이콘 폰트를 사용

fontawesome 사용법

이번에는Font Awesome라는 초편리한 서비스의 사용법을 정리합니다.후반에서는 아이콘으로 다양한 애니메이션 효과를 붙이는 방법도 설명합니다.

1. Font Awesome이란?

웹 사이트나 블로그에서 웹아이콘 폰트를 표시할 수게 하는 서비스입니다.

https://fontawesome.com/

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

웹 아이콘 폰트란?

웹 페이지상에서 문자와 같이 표시할 수 있는 아이콘입니다. 화상에서 아이콘을 붙이는 것과 달리 확대해도 희미해지지 않구 색깔도 크기도 쉽게 바꿀 수 있습니다.

사용사례

예를 들어 위와같이 FontAwesome을 사용하고 표시합니다. 이렇게 색깔도 크기도 자유롭게 변경할 수 있습니다.

FontAwesome5는?

2017년 말에 발매된 FontAwesome의 최신 버전입니다.FontAwesome5에는 무료 플랜과 유료 PRO상품이 잇습니다. 참고로, 옛 버전인 FontAwesome은 지금처럼 계속 사용할 수 있습니다.

2. 사용준비

FontAwesome를 사용하기 때문에 조금만 준비를 할 필요가 있습니다.이 준비는 2가지 방법이 있습니다.

방법1. CDN을 사용

CDN은 엄청나게 말하면"전용 서버에 있는 화상이나 폰트 등의 데이터"를 읽고 자기 Web사이트에 표시하는 방법입니다.즉 아이콘을 내려받아 자신의 서버에 업로드하지 않아도 쓸 수 있습니다.

 

개인적으로는 이 방법이 추천합니다. FontAwesome에 새로운 아이콘이 추가되었을 때 다운로드하고 수정할 필요가 없고, 자신의 서버에의 부하를 줄일 수 있습니다.무엇보다 편한게 좋겠군요. 다만 새 아이콘이 추가될 때는 URL속의v○.○.○부분을 최신버전 번호로 안고친다면 새 아이콘은 사용할 수 없습니다.

 

이하의 코드를 복사

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

옛 버젼을 이용하는 경우
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

SVG&JavaScript에서 사용하는 방법
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

head태그 내에 붙인다.

복사한 코드를 블로그나 Web사이트 <head>~</head>안에 붙입니다. 모르신다면 </head>직전에 붙이면 됩니다. 이렇게 하면 아이콘 폰트의 사용 준비 완료입니다.

 

또하나의 방법은 자신의 서버에 아이콘 폰트를 직접 업로드하는 방법이 있지만, 이 방법은 비효율적이므로 생략합니다.

 

3. FontAwesome의 사용법

준비만 마치면 아이콘 폰트를 표시하는 것은 매우 간단합니다.

순서 1: 쓰고 싶은 아이콘 폰트를 찾는다

아이콘 목록에서 사용하기 아이콘을 선택합니다.

사용하기 아이콘을 클릭합니다. 얇은 그레이로 표시되어 있는 아이콘은 PRO(유료)플랜에서만 사용할 수 있습니다.

참고: 옛 버전인 아이콘 목록

순서 2:아이콘 폰트의 코드를 복사

아이콘의 상세 페이지가 열립니다. 'Start Using This Icon'을 클릭하고 <i class〜></i>이란 코드를 복사합니다.

순서 3:아이콘을 포함시킬 위치로 붙인다.

복사한 코드를 HTML내 아이콘을 포함시킬 위치로 붙입니다. 이것만으로 다음과 같이 아이콘 폰트를 사용할 수 있습니다.

<p><i class="fab fa-twitter"></i>여기에 아이콘을 표시</p>

아이콘의 크기를 바꾸는법

<i class="fas fa-tasksfa-lg"></i>

FontAwesome에서는 아이콘의 크기를 간단히 바꿀 수 있습니다.이하의 코드를i class="〜"안에 쓰는것으로 크기를 키울 수 있습니다.

  • fa-lg(1.333…배)
  • fa-2x(2배)
  • fa-3x(3배)
  • fa-4x(4배)
  • fa-5x(5배)
<p><i class="fas fa-bomb fa-lg"></i></p><p><i class="fas fa-bomb fa-2x"></i></p><p><i class="fas fa-bomb fa-3x"></i></p><p><i class="fas fa-bomb fa-4x"></i></p><p><i class="fas fa-bomb fa-5x"></i></p>

다른 사이즈를 하고 싶을때는 자신의 좋아하는 이름의 class를 추가하며 그 class에 대해서 CSS으로 크기를 지정합시다.

 

실제로 적용해보면,

html 코드
<p><i class="fas fa-bomb my-small"></i></p><p><i class="fas fa-bomb my-big"></i></p>

CSS 코드
.my-small{font-size:0.8em 
  /*0.8배의 크기에*/}.my-big{font-size:6em 
  /*6배의 크기에*/}

아이콘 색상을 바꾸는법

아이콘 색상을 바꿀때는 i태그에 좋아하는 이름의 class를 추가하고 그것에 대해서 CSS에서 색상을 지정합니다.예를 들어 다음과 같이 씁니다.

html 코드
<iclass="fas fa-tag my-gray"></i><iclass="fas fa-tag my-skyblue"></i><iclass="fas fa-tag my-orange"></i>

CSS 코드
.my-gray{color: gray}.my-skyblue{color: skyblue}.my-orange{color:#fecb81}

아이콘 문자 사이에 공간 만드는법

문자 옆에 코드를 붙이면 좀 거북하게 느낄지도 모릅니다. 이때 반각 스페이스를 아이콘과 문자 사이에 입력하면 간단합니다.

<i class="fas fa-tasksfa-fw" ></i>

FontAwesome에서는fa-fw라는 이름의 class를 i태그에 추가하면 앞뒤로 약간의 여백이 만들어지기도 합니다. 이 class에는 "아이콘 종류에 상관 없이, 그 아이콘이 취할 폭을 통일시키는 "이라는 의미가 있습니다. 즉, 아이콘의 크기에 따라서 좌우로 약간의 공간을 만들어 줍니다.

 

또, 아이콘을 세로로 나란히 할 때에는 각각 i태그에fa-fw를 넣으면 예쁘게 나란히 줄 서게 됩니다.

아이콘을 회전시키는법

<i class="fas fa-tasksfa-spin"></i>

fa-spin라는 class이름을 추가하면 아이콘을 빙글빙글 돌릴 수 있습니다. 실제로 봅시다.

html코드
<iclass="far fa-lemon-o fa-spin"></i><iclass="fas fa-cog fa-spin"></i>

표시 각도를 바꾸는법

<i class="fas fa-tasksfa-rotate-90"></i>

이하의 class이름을 추가 아이콘을 기울이고 표시시킬 수도 있습니다.

  • fa-rotate-90:90도 기울인다
  • fa-rotate-180:180도 기울인다
  • fa-rotate-270:270도 기울인다

반전시키는법

<i class="fas fa-tasksfa-flip-horizontal"></i>

별로 사용할 기회는 없을지도 모르지만 반전시킬 수도 있습니다.

  • 지정 없이:
  • fa-flip-horizontal:수평 방향으로 반전
  • fa-flip-vertical:수직 방향으로 반전

class에 fa-border를 더하면 아이콘 주위에 선을 칠 수 있습니다.

 

아이콘을 선으로 둘러쌓는법

<i class="fas fa-tasksfa-border"></i>
<iclass="fas fa-tasks fa-2x fa-border"></i>

아이콘 겹치는법

<span class="fa-stack">
  <i class="fas fa-cloudfa-stack-2x"></i>
  <i class="fab fa-twitterfa-stack-1x"></i>
</span>

이렇게 아이콘끼리 겹치는방법도 있습니다. 사용법은 다음과 같이 됩니다.

  • class이름이fa-stack의 span태그 안에 2개의 아이콘을 넣는다
  • 배면의 아이콘을 시작으로 쓰고 class이름에fa-stack-2x를 추가
  • 다음에 전면의 아이콘을 쓰고 class이름에fa-stack-1x를 추가

4. FontAwesome을 CSS의 요소에서 사용하는법

여기까지는 HTML안에<i클래스>이란 코드를 넣어 왔는데, CSS에서 아이콘을 표시시킬 수도 있습니다. 구체적으로는 의사 요소(before)를 사용합니다.

사용법의 예

<p>이것은<span class="bomb">폭탄</span>입니다.</p>【CSS】
.bomb:before {
  font-family: "Font Awesome 5 Free";
  content: '\f1e2';
  font-weight: 900;
}

·font-family: "Font Awesome 5 Free"; FontAwesome을 사용하는 것을 명시
·content: '\f1e2'에서 아이콘의 종류를 지정라고 기술합니다. 백 슬래시를 잊지 말도록 합시다.

아이콘 종류를 나타내f1e2같은 코드는 각 아이콘의 페이지에서 볼 수 있습니다. 이를 코피페하고 사용합시다.

 

html 코드
<p>이는<span class="bomb">폭탄</span>입니다.</p>

CSS 코드
.bomb:before{font-family:"Font Awesome 5 Free";content:'\f1e2';font-weight:900;
}

주의할점은 FontAwesome5에서는 CSS에서 아이콘을 표시하는 경우에 font-weight도 함께 지정해야 합니다. Solid타입의 아이콘을 표시할 때에는 font-weight: 900;를 Regular유형의 아이콘을 표시할 때에는 font-weight: 400;를 맞춰서 씁니다.

브랜드계의 아이콘을 사용하는 경우에는 font-family을 바꾼다.

브랜드계의 아이콘을 사용할 때는 font-family이름을 "font Awesome 5 Brands"으로 지정합니다.

<p>이것은<span class="twitter">트위터</span>입니다.</p>【CSS】
.twitter:before {
  font-family: "Font Awesome 5 Brands";
  content: '\f099';
}

브랜드계의 아이콘의 경우, 태그의 class이름에 'fab'가 지정되어 있습니다.

또한 옛 버전인 FontAwesome(4.7. ◯ 이전)를 사용의 경우에는font-family: FontAwesome;으로 합니다. Free와 Brands등은 쓰지 않습니다.

SVG+JavaScript에서 아이콘을 표시하는 경우에는 조금 복잡합니다.

'<script defer src ="~"></script>에서 아이콘을 읽고 표시하는 경우, 상기의 CSS지정 외에 이제 조금 더 복잡합니다.

 

head내에 변환 태그를 추가

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script>
  FontAwesomeConfig = { searchPseudoElements: true };
</script>

이 script를 head내에 추가함으로써 의사 요소를 SVG로 변환하고 주게 됩니다.

【CSS】
.twitter:before {
  display: none;
  font-family: "Font Awesome 5 Brands";
  content: '\f099';
}

display:none을 지정 / "JavaScript+SVG"에서의 이용의 경우에는 font-family와 content의 지정과 display: none;도 의사 요소에 대해서 지정하도록 합시다.

제목에 아이콘을 사용

제목에 아이콘 폰트를 쓰고 싶을 때는 다음과 같이 기술합시다.

【CSS】
h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  padding-right : 5px;/*문자와 틈새*/color: #f89174;/*아이콘 색*/}

{padding-right}는 아이콘과 문자의 틈새에 하므로 필요에따라 값을 조정합시다. 또한 이 설정이라고 문자와 아이콘은 이 사이즈가 됩니다. 아이콘을 큼직하게 만들거나 작게 하고 싶을 때는 font-size로 변경합시다. 또한 위의 쓰는 법 예에서는 h3으로 하고있습니다만, h1에서도 h2에서도 글쓰기는 똑같습니다.

 

html 코드
<h3>제목에 아이콘을 사용</h3>

CSS 코드
h3:before{font-family:"Font Awesome 5 Free";content:"\f00c";font-weight:900;padding-right:5px;color:#f89174;/*아이콘 색*/}

5. 여러 애니메이션 사용법

『 Font Awesome Animation』이라는 전용의 스타일 시트를 읽으면, 아이콘에 더 많은 움직임을 걸 수 있게 됩니다.

Font Awesome Animation의 사용법

CDN의 FontAwesome를 읽고 있는 경우, 이하의 코드를 head태그에 추가합니다.이로써 많은 애니메이션 효과가 사용할 수 있게 됩니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

덧붙이고 싶다 움직임의 class이름을 추가

<i class="fas fa-tasks애니메이션의 class이름"></i>


애니메이션을 가하고 싶을 때는 다음과 같이 특정 class이름을 추가합니다.

 

예를 들어faa-wrench animated라는 class를 추가하면 전후로 흔들리는 듯한 움직임을 붙일 수 있습니다. 아이콘은 어느 것을 골라도 상관 없습니다.

<iclass="fab fa-twitter faa-wrench animated"></i>

맞춰서 아이콘을 색상을 바꾸거나 크기를 변경할 수도 있습니다

애니메이션 종류

아래는 Font Awesome Animation을 정리한것입니다.

움직임 class이름 코드
faa-wrench animated 
<i class="fab fa-twitter faa-wrench animated"></i>
faa ring animated 
<i class="fas fa-bus faa-ring animated" ></i>
faa-horizontal animated 
<i class="fas fa-male faa-horizontal animated"></i>
faa-vertical animated 
<i class="fas fa-futbol-o faa-vertical animated"></i>
faa-flash animated 
<i class="fas fa-star faa-flash animated"></i>
faa-bounce animated 
<i class="fas fa-music faa-bounce animated"></i>
faa-spin animated 
<i class="fas fa-refresh faa-spin animated"></i>
faa-float animated 
<i class="fas fa-ship faa-float animated"></i>
faa-pulse animated 
<i class="fas fa-heart faa-pulse animated"></i>
faa-shake animated 
<i class="fas fa-facebook faa-shake animated"></i>
faa-tada animated 
<i class="fas fa-plane faa-tada animated"></i>
faa-passing animated 
<i class="fas fa-bicycle faa-passing animated"></i>
faa-passing-reverse animated 
<i class="fas fa-bicycle faa-passing-reverse animated"></i>
faa-burst animated 
<i class="fas fa-bomb faa-burst animated"></i>

아이콘에 대한 hover때만 움직이는법

class이름의animated를 animated-hover로 다시 작성하면 아이콘에 커서를 올렸을 때(hover시)만 애니메이션이 유효하게 됩니다.

<p><i class="fas fa-twitter fa-2x faa-wrench animated-hover"></i>← 커서를 맞추세요</p>

부모 요소에 대한 hover때만 움직이는법

부모 요소에 커서를 얹었을 때만 움직이도록 하는 일도 있습니다.가령 p태그 안에 아이콘이 있을 경우 p태그에 커서를 올렸을 때 애니메이션이 유효하게 됩니다.

 

  1. 부모 요소에 "faa-parent animated-hover"라는 class이름을 추가
  2. 아이콘에는 "faa-◯ ◯"이라는 class이름만 추가("animated"는 붙이지 않음)
<p class="faa-parent animated-hover">
  <i class="fas fa-twitter faa-wrench"></i>여기에 hover</p>

FontAwesome 애니메이션에 관한것은 아래 사이트를 자세히 참조해봅시다.

https://l-lin.github.io/font-awesome-animation/

 

font-awesome-animation

Simple animations using FontAwesome and some CSS3.

l-lin.github.io

 

교차형 무한

'CSS' 카테고리의 다른 글

[CSS] letter-spacing 자간조정 / line-height 행간조정  (0) 2021.11.09
[CSS]max-width와 min-width사용법 모음  (0) 2021.11.07
[CSS] display 사용법을 총정리! inline이나 block의 차이점은?  (0) 2021.11.06
1. CSS width(너비)와 height(높이)의 기본지식과 지정방법 마스터  (0) 2021.11.05

'CSS' 관련글

티스토리툴바