폰트어썸(Font Awesome) 이용하여 아이콘 가져오기

 

개인 프로젝트를 만들기 시작하면서, 아이콘의 중요성을 매초 실감하고 있습니다.

웹에 꼭 아이콘을 삽입해야 하는 건 아니지만, 확실히 UI 가 시각적 정보를 확연하게 잘 전달하는 것은 사실 !

 

오늘은 부트스트랩(BootStrap)과 비견해서 깔끔한 아이콘을 제공하는 

폰트어썸(Font Awesome) 사용법을 소개하려고 합니다.

 

1) 폰트어썸(Font Awesome) 사이트

 

Font Awesome

 

2) 로그인 > 개인 Kit Code 복사

간단한 이메일 인증을 거쳐 회원가입을 하면 개인페이지에서 Kit Code를 복사합니다.

 

 

 

3) Kit Code를 프로젝트에 붙여넣기

복사한 Kit Code를 아이콘을 사용하고자 하는 프로젝트에 붙여넣습니다.

저는 폰트어썸 4.7.0 버전을 사용했지만, 최신 버전을 사용하고자 하시면 해당 버전으로 붙여넣으시면 됩니다.

 

 

 

4) 원하는 아이콘 찾기

이제 폰트어썸 UI를 사용할 준비는 마쳤습니다.

폰트어썸 사이트에 다시 들어가서 원하는 아이콘을 찾습니다.

저는 로그인에 사용할 아이콘을 찾고 있었기 때문에 'user'를 검색했습니다.

(무료 버전에서도 다양한 아이콘들이 제공되어 저는 무료 버전을 사용하고 있습니다.

'Free' 체크하여 무료로 제공되는 아이콘들을 찾습니다. )

 

 

 

5) 아이콘 코드 복사

원하는 아이콘을 클릭하면, 해당하는 i 코드가 보입니다.

클릭하여 Copy 합니다.

 

 

 

비밀번호 입력란에 삽입하기 위해 어울리는 아이콘도 찾아줍니다. 

 

 

 

6) 아이콘 코드 붙여넣기

아이콘을 나타내고싶은 위치에 코드를 삽입하면 끝 !

 

 

 

 

이제 웹을 실행시켜보면, 아래와 같이 아이콘이 잘 삽입된 것을 보실 수 있습니다.

 

 

 

 

폰트어썸은 아래와 같이 카테고리별로 아이콘을 분류해두어, 원하는 아이콘을 찾기 용이하게 해두었습니다.

폰트어썸은 당연히 색상/위치/크기 변경 등 css를 줄 수 있고, 애니메이션도 줄 수 있습니다.

부트스트랩과 폰트어썸을 풍부하게 사용해서 깔끔한 웹을 만들어봅시다 -! :))