개발하냥
아주 유용한 무료 폰트 아이콘인 Font Awesome 에 대해 알아보자.
*(추가)
현재 5 버전 출시되었지만 4버전에 대해 먼저 알아본다.
STEP 1. HTML 문서에 연결하기
Font Awesome은 CDN을 이용할 수도 있고 다운로드 받아 사용할 수도 있습니다.
간편한 방법은 CDN이지만, 속도가 느리다면 다운로드 받아 사용가능합니다.
- CDN 이용하기
HTML 문서의 <head>와 </head> 사이에 다음의 코드 추가
4.7.0은 버전정보, 원하는 정보를 숫자변경을 통하여 사용할 수 있음.
- 다운받아 사용하기
Font Awesome v4.7.0 홈페이지에서 다운로드
css 폴더 안의 font-awesome.min.css 파일과 fonts 폴더 안의 모든 파일
업로드 한 후 HTML 문서의 <head>와 </head> 사이에 다음의 코드 추가 (경로는 사용자가 적절하게 사용)
STEP 2. 아이콘 넣기
처럼 생긴 코드를 넣으면 아이콘이 나옵니다.
코드는 Font Awesome 홈페이지의 v4.7.0버전 아이콘 목록에서 찾을 수 있습니다.
원하는 아이콘을 클릭하면 확대된 아이콘과 코드를 볼 수 있다.
＃ Font Awesome은 폰트이므로, 글자를 꾸미는 것과 같은 방식으로 아이콘을 꾸밀 수 있다.
