Header Ads Widget

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">
  1. CSS에서 font-family를 명확하게 설정
  2. 브라우저 개발자 도구(F12)에서 폰트가 정상적으로 로드되는지 확인

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

댓글 쓰기

0 댓글