hexo 에서 fontawesome 사용하기

2025-06-25

fontawesome, hexo

⚠️ 변경사항

fontawesome 라이브러리가 너무 오래되어 2025-06-25 15:18:58 기준
기존 hexo-tag-fontawesome 플러그인을 사용하는 방식에서
사용자 플러인을 추가하는 방식으로 변경함

개요

Font Awesome은 블로그 글이나 템플릿 안에서 아이콘을 손쉽게 삽입할 수 있도록 도와주는
아이콘 폰트 라이브러리 이다. Hexo에서 Font Awesome 사용하는 방법에 대해서 정리한다.

사용자 플러그인 추가

scritps/fa.js를 아래와 같이 코딩한다.

hexo.extend.tag.register('fa', function(args) {
    if (!args.length) return '';

    const icon = args[0];
    let size = '';
    let style = 'solid';
    const extraClasses = [];

    const sizes = ['lg', 'xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x', '2xl'];
    const styles = ['solid', 'regular', 'brands'];
    const rotations = ['rotate-90', 'rotate-180', 'rotate-270'];
    const animations = ['spin', 'pulse', 'spin-pulse', 'spin-reverse', 'beat', 'beat-fade']; // ← 여기에 추가
    const flips = ['flip-horizontal', 'flip-vertical'];
    const others = ['border', 'fw', 'inverse'];

    args.slice(1).forEach(arg => {
        if (sizes.includes(arg)) {
            size = arg;
        } else if (styles.includes(arg)) {
            style = arg;
        } else if (rotations.includes(arg) ||
            animations.includes(arg) ||
            flips.includes(arg) ||
            others.includes(arg)) {
            extraClasses.push(`fa-${arg}`);
        }
    });

    return `<i class="fa-${style} fa-${icon}${size ? ' fa-' + size : ''}${extraClasses.length ? ' ' + extraClasses.join(' ') : ''}"></i>`;
}, { ends: false });

수정한 파일 디렉토리 구조

사용법

아래와 같이 fa 하고 아이콘 이름을 넣고 옵션을 추가하면 된다.

1	{% fa [icon-name] [options…] %}

기본

1	{% fa user %} 유저 아이콘 출력

유저 아이콘 출력

아이콘 크기

{% fa user 1x %} 유저 아이콘 크기 1x
{% fa user 2x %} 유저 아이콘 크기 2x
{% fa user 3x %} 유저 아이콘 크기 3x
{% fa user 4x %} 유저 아이콘 크기 4x
{% fa user 5x %} 유저 아이콘 크기 5x
{% fa user 6x %} 유저 아이콘 크기 6x
{% fa user 7x %} 유저 아이콘 크기 7x
{% fa user 8x %} 유저 아이콘 크기 8x
{% fa user 9x %} 유저 아이콘 크기 9x
{% fa user 10x %} 유저 아이콘 크기 10x

유저 아이콘 크기 1x
유저 아이콘 크기 2x
유저 아이콘 크기 3x
유저 아이콘 크기 4x
유저 아이콘 크기 5x
유저 아이콘 크기 6x
유저 아이콘 크기 7x
유저 아이콘 크기 8x
유저 아이콘 크기 9x
유저 아이콘 크기 10x

아이콘 유형

1 2	{% fa user solid %} 유저 아이콘 solid {% fa user regular %} 유저 아이콘 regular

유저 아이콘 solid
유저 아이콘 regular

아이콘 회전

{% fa coffee %} 무회전
{% fa coffee rotate-90 %} 90도 회전
{% fa coffee rotate-180 %} 180도 회전
{% fa coffee rotate-270 %} 270도 회전
{% fa coffee flip-horizontal %} 수평방향 회전
{% fa coffee flip-vertical %} 수직방향 회전
{% fa coffee flip-both %} 수평수직방향 회전

무회전
90도 회전
180도 회전
270도 회전
수평방향 회전
수직방향 회전
수평수직방향 회전

아이콘 스타일링

<span style="font-size: 3em; color: Tomato;">
  {% fa camera %}
</span>

<span style="font-size: 48px; color: Dodgerblue;">
    {% fa camera %}
</span>

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
    {% fa camera %}
  </span>
</span>

아이콘 애니메이션

1 2	{% fa circle-plus beat %} {% fa heart beat %}

전체 무료 사용가능 아이콘 리스트

아이콘을 클릭하면 hexo 에서 사용 가능하도록 태그가 복사된다.

42-group

500px

accessible-icon

accusoft

address-book

address-card

adn

adversal

affiliatetheme

airbnb

algolia

align-center

align-justify

align-left

align-right

alipay

amazon

amazon-pay

amilia

anchor

anchor-circle-check

anchor-circle-exclamation

anchor-circle-xmark

anchor-lock

android

angellist

angle-down

angle-left

angle-right

angle-up

angles-down

angles-left

angles-right

angles-up

angrycreative

angular

ankh

app-store

app-store-ios

apper

apple

apple-pay

apple-whole

archway

arrow-down

arrow-down-1-9

arrow-down-9-1

arrow-down-a-z

arrow-down-long

arrow-down-short-wide

arrow-down-up-across-line

arrow-down-up-lock

arrow-down-wide-short

arrow-down-z-a

arrow-left

arrow-left-long

arrow-pointer

arrow-right

arrow-right-arrow-left

arrow-right-from-bracket

arrow-right-long

arrow-right-to-bracket

arrow-right-to-city

arrow-rotate-left

arrow-rotate-right

arrow-trend-down

arrow-trend-up

arrow-turn-down

arrow-turn-up

arrow-up

arrow-up-1-9

arrow-up-9-1

arrow-up-a-z

arrow-up-from-bracket

arrow-up-from-ground-water

arrow-up-from-water-pump

arrow-up-long

arrow-up-right-dots

arrow-up-right-from-square

arrow-up-short-wide

arrow-up-wide-short

arrow-up-z-a

arrows-down-to-line

arrows-down-to-people

arrows-left-right

arrows-left-right-to-line

arrows-rotate

arrows-spin

arrows-split-up-and-left

arrows-to-circle

arrows-to-dot

arrows-to-eye

arrows-turn-right

arrows-turn-to-dots

arrows-up-down

arrows-up-down-left-right

arrows-up-to-line

artstation

asterisk

asymmetrik

atlassian

atom

audible

audio-description

austral-sign

autoprefixer

avianex

aviato

award

aws

baby

baby-carriage

backward

backward-fast

backward-step

bacon

bacteria

bacterium

bag-shopping

bahai

baht-sign

ban

ban-smoking

bandage

bandcamp

bangladeshi-taka-sign

barcode

bars

bars-progress

bars-staggered

baseball

baseball-bat-ball

basket-shopping

basketball

bath

battery-empty

battery-full

battery-half

battery-quarter

battery-three-quarters

battle-net

bed

bed-pulse

beer-mug-empty

behance

bell

bell-concierge

bell-slash

bezier-curve

bicycle

bilibili

bimobject

binoculars

biohazard

bitbucket

bitcoin

bitcoin-sign

bity

black-tie

blackberry

blender

blender-phone

blog

blogger

blogger-b

bluesky

bluetooth

bluetooth-b

bold

bolt

bolt-lightning

bomb

bone

bong

book

book-atlas

book-bible

book-bookmark

book-journal-whills

book-medical

book-open

book-open-reader

book-quran

book-skull

book-tanakh

bookmark

bootstrap

border-all

border-none

border-top-left

bore-hole

bots

bottle-droplet

bottle-water

bowl-food

bowl-rice

bowling-ball

box

box-archive

box-open

box-tissue

boxes-packing

boxes-stacked

braille

brain

brave

brave-reverse

brazilian-real-sign

bread-slice

bridge

bridge-circle-check

bridge-circle-exclamation

bridge-circle-xmark

bridge-lock

bridge-water

briefcase

briefcase-medical

broom

broom-ball

brush

btc

bucket

buffer

bug

bug-slash

bugs

building

building-circle-arrow-right

building-circle-check

building-circle-exclamation

building-circle-xmark

building-columns

building-flag

building-lock

building-ngo

building-shield

building-un

building-user

building-wheat

bullhorn

bullseye

burger

buromobelexperte

burst

bus

bus-simple

business-time

buy-n-large

buysellads

cable-car

cake-candles

calculator

calendar

calendar-check

calendar-day

calendar-days

calendar-minus

calendar-plus

calendar-week

calendar-xmark

camera

camera-retro

camera-rotate

campground

canadian-maple-leaf

candy-cane

cannabis

capsules

car

car-battery

car-burst

car-on

car-rear

car-side

car-tunnel

caravan

caret-down

caret-left

caret-right

caret-up

carrot

cart-arrow-down

cart-flatbed

cart-flatbed-suitcase

cart-plus

cart-shopping

cash-register

cat

cc-amazon-pay

cc-amex

cc-apple-pay

cc-diners-club

cc-discover

cc-jcb

cc-mastercard

cc-paypal

cc-stripe

cc-visa

cedi-sign

cent-sign

centercode

centos

certificate

chair

chalkboard

chalkboard-user

champagne-glasses

charging-station

chart-area

chart-bar

chart-column

chart-diagram

chart-gantt

chart-line

chart-pie

chart-simple

check

check-double

check-to-slot

cheese

chess

chess-bishop

chess-board

chess-king

chess-knight

chess-pawn

chess-queen

chess-rook

chevron-down

chevron-left

chevron-right

chevron-up

child

child-combatant

child-dress

child-reaching

children

chrome

chromecast

church

circle

circle-arrow-down

circle-arrow-left

circle-arrow-right

circle-arrow-up

circle-check

circle-chevron-down

circle-chevron-left

circle-chevron-right

circle-chevron-up

circle-dollar-to-slot

circle-dot

circle-down

circle-exclamation

circle-h

circle-half-stroke

circle-info

circle-left

circle-minus

circle-nodes

circle-notch

circle-pause

circle-play

circle-plus

circle-question

circle-radiation

circle-right

circle-stop

circle-up

circle-user

circle-xmark

city

clapperboard

clipboard

clipboard-check

clipboard-list

clipboard-question

clipboard-user

clock

clock-rotate-left

clone

closed-captioning

cloud

cloud-arrow-down

cloud-arrow-up

cloud-bolt

cloud-meatball

cloud-moon

cloud-moon-rain

cloud-rain

cloud-showers-heavy

cloud-showers-water

cloud-sun

cloud-sun-rain

cloudflare

cloudscale

cloudsmith

cloudversify

clover

cmplid

code

code-branch

code-commit

code-compare

code-fork

code-merge

code-pull-request

codepen

codiepie

coins

colon-sign

comment

comment-dollar

comment-dots

comment-medical

comment-nodes

comment-slash

comment-sms

comments

comments-dollar

compact-disc

compass

compass-drafting

compress

computer

computer-mouse

confluence

connectdevelop

contao

cookie-bite

copy

cotton-bureau

couch

cow

cpanel

creative-commons

creative-commons-by

creative-commons-nc

creative-commons-nc-eu

creative-commons-nc-jp

creative-commons-nd

creative-commons-pd

creative-commons-pd-alt

creative-commons-remix

creative-commons-sa

creative-commons-sampling

creative-commons-sampling-plus

creative-commons-share

creative-commons-zero

credit-card

critical-role

crop

crop-simple

cross

crosshairs

crow

crown

crutch

cruzeiro-sign

css

css3

css3-alt

cube

cubes

cubes-stacked

cuttlefish

d-and-d

d-and-d-beyond

dailymotion

dart-lang

dashcube

database

debian

deezer

delete-left

delicious

democrat

deploydog

deskpro

desktop

dev

deviantart

dharmachakra

dhl

diagram-next

diagram-predecessor

diagram-project

diagram-successor

diamond

diamond-turn-right

diaspora

dice

dice-d20

dice-d6

dice-five

dice-four

dice-one

dice-six

dice-three

dice-two

digg

digital-ocean

discord

discourse

disease

display

divide

dna

dochub

docker

dog

dollar-sign

dolly

dong-sign

door-closed

door-open

dove

down-left-and-up-right-to-center

down-long

download

draft2digital

dragon

draw-polygon

dribbble

dropbox

droplet

droplet-slash

drum

drum-steelpan

drumstick-bite

drupal

dumbbell

dumpster

dumpster-fire

dungeon

dyalog

ear-deaf

ear-listen

earlybirds

earth-africa

earth-americas

earth-asia

earth-europe

earth-oceania

ebay

edge

edge-legacy

egg

eject

elementor

elevator

ellipsis

ellipsis-vertical

ello

ember

empire

envelope

envelope-circle-check

envelope-open

envelope-open-text

envelopes-bulk

envira

equals

eraser

erlang

ethereum

ethernet

etsy

euro-sign

evernote

exclamation

expand

expeditedssl

explosion

eye

eye-dropper

eye-low-vision

eye-slash

face-angry

face-dizzy

face-flushed

face-frown

face-frown-open

face-grimace

face-grin

face-grin-beam

face-grin-beam-sweat

face-grin-hearts

face-grin-squint

face-grin-squint-tears

face-grin-stars

face-grin-tears

face-grin-tongue

face-grin-tongue-squint

face-grin-tongue-wink

face-grin-wide

face-grin-wink

face-kiss

face-kiss-beam

face-kiss-wink-heart

face-laugh

face-laugh-beam

face-laugh-squint

face-laugh-wink

face-meh

face-meh-blank

face-rolling-eyes

face-sad-cry

face-sad-tear

face-smile

face-smile-beam

face-smile-wink

face-surprise

face-tired

facebook

facebook-f

facebook-messenger

fan

fantasy-flight-games

faucet

faucet-drip

fax

feather

feather-pointed

fedex

fedora

ferry

figma

file

file-arrow-down

file-arrow-up

file-audio

file-circle-check

file-circle-exclamation

file-circle-minus

file-circle-plus

file-circle-question

file-circle-xmark

file-code

file-contract

file-csv

file-excel

file-export

file-fragment

file-half-dashed

file-image

file-import

file-invoice

file-invoice-dollar

file-lines

file-medical

file-pdf

file-pen

file-powerpoint

file-prescription

file-shield

file-signature

file-video

file-waveform

file-word

file-zipper

files-pinwheel

fill

fill-drip

film

filter

filter-circle-dollar

filter-circle-xmark

fingerprint

fire

fire-burner

fire-extinguisher

fire-flame-curved

fire-flame-simple

firefox

firefox-browser

first-order

first-order-alt

firstdraft

fish

fish-fins

flag

flag-checkered

flag-usa

flask

flask-vial

flickr

flipboard

floppy-disk

florin-sign

flutter

fly

folder

folder-closed

folder-minus

folder-open

folder-plus

folder-tree

font

font-awesome

fonticons

fonticons-fi

football

fort-awesome

fort-awesome-alt

forumbee

forward

forward-fast

forward-step

foursquare

franc-sign

free-code-camp

freebsd

frog

fulcrum

futbol

galactic-republic

galactic-senate

gamepad

gas-pump

gauge

gauge-high

gauge-simple

gauge-simple-high

gavel

gear

gears

gem

genderless

get-pocket

gg-circle

ghost

gift

gifts

git

git-alt

github

github-alt

gitkraken

gitlab

gitter

glass-water

glass-water-droplet

glasses

glide

glide-g

globe

gofore

golang

golf-ball-tee

goodreads

goodreads-g

google

google-drive

google-pay

google-play

google-plus

google-plus-g

google-scholar

google-wallet

gopuram

graduation-cap

gratipay

grav

greater-than

greater-than-equal

grip

grip-lines

grip-lines-vertical

grip-vertical

gripfire

group-arrows-rotate

grunt

guarani-sign

guilded

guitar

gulp

gun

hacker-news

hackerrank

hammer

hamsa

hand

hand-back-fist

hand-dots

hand-fist

hand-holding

hand-holding-dollar

hand-holding-droplet

hand-holding-hand

hand-holding-heart

hand-holding-medical

hand-lizard

hand-middle-finger

hand-peace

hand-point-down

hand-point-left

hand-point-right

hand-point-up

hand-pointer

hand-scissors

hand-sparkles

hand-spock

handcuffs

hands

hands-asl-interpreting

hands-bound

hands-bubbles

hands-clapping

hands-holding

hands-holding-child

hands-holding-circle

hands-praying

handshake

handshake-angle

handshake-simple

handshake-simple-slash

handshake-slash

hanukiah

hard-drive

hashnode

hashtag

hat-cowboy

hat-cowboy-side

hat-wizard

head-side-cough

head-side-cough-slash

head-side-mask

head-side-virus

heading

headphones

headphones-simple

headset

heart

heart-circle-bolt

heart-circle-check

heart-circle-exclamation

heart-circle-minus

heart-circle-plus

heart-circle-xmark

heart-crack

heart-pulse

helicopter

helicopter-symbol

helmet-safety

helmet-un

hexagon-nodes

hexagon-nodes-bolt

highlighter

hill-avalanche

hill-rockslide

hippo

hips

hire-a-helper

hive

hockey-puck

holly-berry

hooli

hornbill

horse

horse-head

hospital

hospital-user

hot-tub-person

hotdog

hotel

hotjar

hourglass

hourglass-end

hourglass-half

hourglass-start

house

house-chimney

house-chimney-crack

house-chimney-medical

house-chimney-user

house-chimney-window

house-circle-check

house-circle-exclamation

house-circle-xmark

house-crack

house-fire

house-flag

house-flood-water

house-flood-water-circle-arrow-right

house-laptop

house-lock

house-medical

house-medical-circle-check

house-medical-circle-exclamation

house-medical-circle-xmark

house-medical-flag

house-signal

house-tsunami

house-user

houzz

hryvnia-sign

html5

hubspot

hurricane

i-cursor

ice-cream

icicles

icons

id-badge

id-card

id-card-clip

ideal

igloo

image

image-portrait

images

imdb

inbox

indent

indian-rupee-sign

industry

infinity

info

instagram

instalod

intercom

internet-explorer

invision

ioxhost

italic

itch-io

itunes

itunes-note

jar

jar-wheat

java

jedi

jedi-order

jenkins

jet-fighter

jet-fighter-up

jira

joget

joint

joomla

jsfiddle

jug-detergent

jxl

kaaba

kaggle

key

keybase

keyboard

keycdn

khanda

kickstarter

kickstarter-k

kip-sign

kit-medical

kitchen-set

kiwi-bird

korvue

land-mine-on

landmark

landmark-dome

landmark-flag

language

laptop

laptop-code

laptop-file

laptop-medical

laravel

lari-sign

lastfm

layer-group

leaf

leanpub

left-long

left-right

lemon

less

less-than

less-than-equal

letterboxd

life-ring

lightbulb

line

lines-leaning

link

link-slash

linkedin-in

linode

linux

lira-sign

list

list-check

list-ol

list-ul

litecoin-sign

location-arrow

location-crosshairs

location-dot

location-pin

location-pin-lock

lock

lock-open

locust

lungs

lungs-virus

lyft

magento

magnet

magnifying-glass

magnifying-glass-arrow-right

magnifying-glass-chart

magnifying-glass-dollar

magnifying-glass-location

magnifying-glass-minus

magnifying-glass-plus

mailchimp

manat-sign

mandalorian

map

map-location

map-location-dot

map-pin

markdown

marker

mars

mars-and-venus

mars-and-venus-burst

mars-double

mars-stroke

mars-stroke-right

mars-stroke-up

martini-glass

martini-glass-citrus

martini-glass-empty

mask

mask-face

mask-ventilator

masks-theater

mastodon

mattress-pillow

maxcdn

maximize

mdb

medal

medapps

medium

medrt

meetup

megaport

memory

mendeley

menorah

mercury

message

Blog

hexo 에서 fontawesome 사용하기

개요

사용자 플러그인 추가

최신 라이브러리 테마에 추가

수정한 파일 디렉토리 구조

사용법

기본

아이콘 크기

아이콘 유형

아이콘 회전

아이콘 스타일링

아이콘 애니메이션

전체 무료 사용가능 아이콘 리스트