여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 폰트어썸 - Font Awesome 사용
폰트어썸 – Font Awesome 사용
4개월전 작성
4개월전 수정

웹서핑을 하다보면 메뉴에 그림은 아니지만 아이콘이 들어가있거나 글 중간 중간 특수문자도 이미지도 아닌 그림 같은게 들어가있는경우가 있다.

그럴 때 주로 폰트어썸이 사용되는데 폰트어썸 사용하는 방법에 대해 자세히 알아보자.

Font-Awesome

Font Awesome에서 제공하는 글꼴 및 아이콘을 웹폰트 형식으로 사용할 수 있는 툴킷이다.

구글 폰트에 이어 2번째로 많은 사람들이 폰트어썸을 사용하고 있다고 한다.

움직이는것도 가능, 폰트어썸의 폰트들을 조합해서 사용하는것도 가능하여 참 괜찮은 서비스인 것 같다.

무료 사용자와 유료 사용자가 있으나 굳이 유료까지 사용하지 않아도 무료로도 충분히 많은 아이콘들을 사용할 수 있다.

키트

Font Awesome v6부터는 키트를 생성하고 사용해야한다. 안그럼 안보임.

1. https://fontawesome.com/kits로 접속

2. 로그인 (회원 가입 안되어있으면 해야한다.)

3. 새로운 키트 생성

4. 키트 복사 후 사용할 페이지의 에 넣자.

사이에 복사해준 코드를 넣어준다.

예시
<head>
	<title>[ 타이틀 입력 ]</title>
	<script src="https://kit.fontawesome.com/a123456.js" crossorigin="anonymous"></script>
</head>

WORDPRESS 이용하고있다면 functions.php에 wp_enqueue_script() 함수 이용하여 넣을 수 있다.

예시
wp_enqueue_script( 'https://kit.fontawesome.com/a123456.js' );

wp_enqueue_script()에 대해서는 특정 템플릿 CSS / JS 파일 추가 하기 참고하자.

사용

1. 무료 아이콘 보기로 들어가서 마음에 드는 아이콘 하나 선택 하자.

2. html에 있는 태그 클릭 하면 복사 된다.

3. 사용하고 싶은 위치에 붙여넣기 한다.

기본 예시

아이콘 종류

  
  

  
  

  
  

  
  

  
  

  
  

대부분 fa-solid는 무료고 regular도 무료가 있긴하지만 fa-light, fa-duotone, fa-thin은 유료 사용자만 이용 가능하다.

크기

기본 브라우져의 1em = 16px 기준으로 표현이 되지만 나는 기본 폰트 사이즈를 14px로 설정해놓아서 다른 사이트보다 조금 작게 보인다.

상대 크기, 리터럴 크기를 클래스로 손쉽게 사용할 수 있으나 일반 텍스트처럼 css로 크기 설정해주는것도 가능하다.

상대 크기

Font Awesome에는 아이콘의 크기를 늘리거나 줄일 뿐만 아니라 아이콘을 주변 텍스트 및 요소와 수직으로 정렬하는 데 도움이 되는 다양한 크기가 포함되어 있다. UI 요소와 함께 가독성 및 정렬을 유지하면서 아이콘의 크기를 늘리면서 줄이기에 적합하다.

기본 예시

 







사용된 클래스 설명
fa-2xs
0.625em
fa-xs
0.75em
fa-sm
0.875em
1em
fa-lg
1.25em
fa-xl
1.5em
fa-2xl
2em

리터럴 크기

Font Awesome에는 아이콘의 크기를 쉽게 키우는 리터럴 크기도 포함되어 있다. 리터럴 크기 조정은 더 크게 아이콘 크기를 조정하는 데 유용하다.

기본 예시

 










사용된 클래스 설명
fa-1x
1em
fa-2x
2em
fa-3x
3em
fa-4x
4em
fa-5x
5em
fa-6x
6em
fa-7x
7em
fa-8x
8em
fa-9x
9em
fa-10x
10em

색상

기본 색상으로 출력되나 css로 텍스트의 색상을 변경하듯 class 지정한 후 변경할 수 있다.

기본 예시

 

회전

아이콘이 단방향이라 회전을 하거나 뒤집고 싶을 때 이 기능을 이용할 수 있다.

기본 예시

 

사용된 클래스 설명
fa-rotate-90
아이콘 90° 회전
fa-rotate-180
아이콘 180° 회전
fa-rotate-270
아이콘 270° 회전
fa-flip-horizontal
아이콘을 가로로 뒤집기
fa-flip-vertical
아이콘을 세로로 뒤집기
fa-flip-both
아이콘을 가로, 세로 다 뒤집기
fa-rotate-by
아이콘을 특정 정도로 회전한다. CSS –fa-rotate-angle와 함께 사용 된다.

–fa-rotate-angle 사용

CSS랑 결합해서 회전할 때는 inline 요소가 아닌 block요소를 추천한다고 한다.

기본 예시

 

애니메이션

비트, 페이드, 비트 페이드, 바운스 및 아이콘 회전 등의 애니메이션을 이용할 수 있다.

비트

기본 예시

 

사용된 클래스 설명
–fa-beat-scale
아이콘의 배율이 최대 값 설정

페이드

기본 예시

 

사용된 클래스 설명
–fa-fade-opacity
아이콘이 페이드 인 경우 가장 낮은 불투명도 값 설정

비트 페이드

기본 예시

 

사용된 클래스 설명
–fa-beat-fade-opacity
아이콘이 페이드 인 경우 가장 낮은 불투명도 값 설정
–fa-beat-fade-scale
아이콘의 배율이 최대 값 설정

바운스

기본 예시
사용된 클래스 설명
–fa-bounce-rebound
점프 후 착륙 할 때 아이콘이 가지고있는 리바운드 양 설정
–fa-bounce-height
아이콘이 튀어나오면 최대 높이 설정
–fa-bounce-start-scale-x
바운스를 시작할 때 아이콘의 가로 왜곡(“squish”) 설정
–fa-bounce-start-scale-y
바운스를 시작할 때 아이콘의 세로 왜곡(“squish”) 설정
–fa-bounce-jump-scale-x
점프 상단에 아이콘의 가로 왜곡(“squish”) 설정
–fa-bounce-jump-scale-y
점프 상단에 아이콘의 세로 왜곡(“squish”) 설정
–fa-bounce-land-scale-x
점프 후 착륙할 때 아이콘의 수평 왜곡(“squish”) 설정
–fa-bounce-land-scale-y
점프 후 착륙할 때 아이콘의 수직 왜곡(“squish”) 설정

뒤집기

기본 예시
사용된 클래스 설명
–fa-flip-x
회전 축을 나타내는 벡터의 x 좌표 설정(사이 와 01)
–fa-flip-y
회전 축을 나타내는 벡터의 y-좌표 설정(사이 와 01)
–fa-flip-z
회전 축을 나타내는 벡터의 z 좌표 설정(사이 및 01)
–fa-flip-angle
회전 각도를 뒤집습니다. 양수 각도는 시계 방향으로 회전하는 것을 나타내며, 음의 각도는 시계 반대 방향으로 됩니다.

흔들기

기본 예시

 

회전

기본 예시
사용된 클래스 설명
fa-spin
아이콘이 시계 방향으로 360° 회전합니다.
fa-spin-pulse
8개의 증분 단계에서 아이콘스핀360° 시계 방향으로 회전합니다.
fa-spin-reverse
함께 사용하거나 아이콘이 시계 반대 방향으로 회전합니다.fa-spinfa-spin-pulse

사용자화

기본 예시
사용된 클래스 설명
–fa-animation-delay
애니메이션의 초기 지연 설정
–fa-animation-direction
애니메이션에 대한 방향 설정
–fa-animation-duration
애니메이션의 시간 설정
–fa-animation-iteration-count
애니메이션에 대한 반복 수 설정
–fa-animation-timing
애니메이션이 프레임을 통해 진행되는 방식 설정

스택

여러 아이콘을 스택하려면 스택하려는 아이콘의 크기 클래스를 상위 요소에서 사용한다. 그 후 겹치려고하는 아이콘을 fa-1x와 같이 기본 사이즈로 추가하고 더 큰 아이콘에 대한 클래스를 추가한다.

기본 예시

 


    
    


    
    


    
    


    
    


    
    


    
    


    
    
사용된 클래스 설명
fa-stack
아이콘 겹칠 때 부모 요소에 사용
fa-stack-1x
아이콘 겹칠 때 기본 크기로 표시해야 하는 아이콘에 사용
fa-stack-2x
아이콘 겹칠 때 더 크게 표시해야 하는 아이콘에 사용
fa-inverse
아이콘 겹칠 때 기본 크기로 표시되는 아이콘 색상을 반전시킬 때 사용
–fa-stack-z-index
적층 아이콘의 z 인덱스 설정
–fa-inverse
반전된 누적 아이콘의 색상 설정
참고
Mingg`s Diary
밍구
공부 목적 블로그