Font Awesome
: 웹에서 아이콘이 필요할 때 사용하는 라이브러리
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
1. html 파일의 <head> 태그 안에 <link> 태그로 CDN 서비스의 URL 지정
- 버전마다 다름
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
2. Font Awesome에서 사용할 아이콘의 코드 복사, 붙여넣기
- 오른쪽 상단 코드 모양 => 코드 복사
- 오른쪽 상단 다운로드 모양 => SVG 파일로 다운로드
- 태그 변경 가능 (ex. <span> 등)
* 아이콘 제어하기
아이콘 코드에 class 속성을 추가하여 아이콘을 변형시킬 수 있다.
https://codesandbox.io/p/sandbox/font-awesome-v5-ngjhy?file=%2Findex.html&from-embed=
codesandbox.io
* React에서 Font Awesome 사용하기
React에서 Font Awesome 사용하기
Engineering Blog by Dale Seo
www.daleseo.com
참고
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
Font Awesome 5 사용법 (ver 4 포함)
Engineering Blog by Dale Seo
www.daleseo.com