📌 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' |
🔵 | '\f09a' | |
🟦 | '\f099' | |
📷 | '\f16d' | |
🎥 | YouTube | '\f167' |
🟩 | '\f232' | |
🔗 | '\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
적용 방법
📌 FontAwesome 6+ 버전에서는 font-family
가 다를 수 있음
🎯 결론
✅ 많이 사용되는 아이콘 코드:
- 🔍 검색 (
\f002
), 🏠 홈 (\f015
), ✔ 체크 (\f00c
), ❌ 닫기 (\f00d
), ⚙️ 설정 (\f013
) - 📁 폴더 (
\f07b
), 🔊 볼륨 (\f028
), 🔒 잠금 (\f023
), 📩 메일 (\f0e0
)
✅ FontAwesome이 적용되지 않는다면?
- 최신 FontAwesome CDN 추가
- CSS에서
font-family
를 명확하게 설정 - 브라우저 개발자 도구(F12)에서 폰트가 정상적으로 로드되는지 확인
🚀 위 아이콘 코드들을 활용하면 UI 디자인을 더 직관적으로 만들 수 있습니다! 😊
0 댓글
이 글에 대한 생각이나 궁금한 점을 남겨주세요. 여러분의 댓글은 큰 힘이 됩니다! 🙌