FontAwesome에서 자주 사용되는 아이콘 코드 목록 (content: '\f***';)

📌 FontAwesome에서 많이 사용되는 대표적인 아이콘 코드들을 정리했습니다.

📌 content: '\f107'; 이외에도 다양한 아이콘을 CSS에서 ::before 또는 ::after로 사용할 수 있습니다. 

아이콘	설명	코드 (`content`)
🔽	아래 방향 화살표 (Chevron Down)	'\f107'
🔼	위 방향 화살표 (Chevron Up)	'\f106'
◀️	왼쪽 방향 화살표 (Chevron Left)	'\f104'
▶️	오른쪽 방향 화살표 (Chevron Right)	'\f105'
↩️	뒤로 가기 (Arrow Left)	'\f0a8'
↪️	앞으로 가기 (Arrow Right)	'\f0a9'
⬆️	위쪽 화살표 (Arrow Up)	'\f062'
⬇️	아래쪽 화살표 (Arrow Down)	'\f063'
📁	폴더 (Folder)	'\f07b'
🏠	홈 (Home)	'\f015'
🔍	검색 (Search)	'\f002'
⭐	즐겨찾기 (Star)	'\f005'
⚙️	설정 (Cog, Gear)	'\f013'
❗	경고 (Exclamation Circle)	'\f06a'
ℹ️	정보 (Info Circle)	'\f05a'
📩	메일 (Envelope)	'\f0e0'
✔️	체크 (Check)	'\f00c'
❌	닫기 (Times, X)	'\f00d'
🔵	Facebook	'\f09a'
🟦	Twitter	'\f099'
📷	Instagram	'\f16d'
🎥	YouTube	'\f167'
🟩	WhatsApp	'\f232'
🔗	LinkedIn	'\f0e1'
🎵	Spotify	'\f1bc'
➕	플러스 (Plus)	'\f067'
➖	마이너스 (Minus)	'\f068'
▶️	재생 (Play)	'\f04b'
⏸️	일시정지 (Pause)	'\f04c'
⏹️	정지 (Stop)	'\f04d'
🔊	볼륨 높이기 (Volume Up)	'\f028'
🔈	볼륨 낮추기 (Volume Down)	'\f027'
🔇	음소거 (Mute)	'\f026'
💾	저장 (Save, Floppy)	'\f0c7'
🖨️	프린트 (Print)	'\f02f'
⏳	로딩 (Spinner)	'\f110'
🔒	잠금 (Lock)	'\f023'
🔓	잠금 해제 (Unlock)	'\f09c'
📅	캘린더 (Calendar)	'\f073'
🗑️	휴지통 (Trash)	'\f1f8'

🚀 CSS에서 사용 예제

📌 FontAwesome을 이용한 content 적용 방법

css
.menu-icon::before {
    font-family: "Font Awesome 5 Free";  /* FontAwesome 버전 5+ */
    font-weight: 900; /* 두꺼운 스타일 */
    content: '\f107';  /* Chevron Down */
}

📌 FontAwesome 6+ 버전에서는 font-family가 다를 수 있음

css
.menu-icon::before {
    font-family: "Font Awesome 6 Free";  
    content: '\f00c';  /* 체크 아이콘 */
}

🎯 결론

✅ 많이 사용되는 아이콘 코드:

• 🔍 검색 (\f002), 🏠 홈 (\f015), ✔ 체크 (\f00c), ❌ 닫기 (\f00d), ⚙️ 설정 (\f013)
• 📁 폴더 (\f07b), 🔊 볼륨 (\f028), 🔒 잠금 (\f023), 📩 메일 (\f0e0)

✅ FontAwesome이 적용되지 않는다면?

1. 최신 FontAwesome CDN 추가

html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

2. CSS에서 font-family를 명확하게 설정
3. 브라우저 개발자 도구(F12)에서 폰트가 정상적으로 로드되는지 확인

🚀 위 아이콘 코드들을 활용하면 UI 디자인을 더 직관적으로 만들 수 있습니다! 😊