폰트어썸 아이콘 - CSS 설치 방법, 다운로드 주소, 경로 (1편) > 웹제작/운영

폰트어썸 아이콘 1

CSS 설치 방법, 다운로드 주소, 경로

홈페이지를 제작하려면 작은 아이콘을 많이 만들게 된다. 그런데 다양한 아이콘을 무료로, 그것도 편리한 CSS 방식으로 사용할 수 있는 방법이 있다. 

일단 여기서는 폰트어썸 아이콘을 다운로드하고 설치하는 방법에 대해 설명한다.

(연재 글이므로 아래 링크에서 2편도 함께 보면 유용함)

폰트어썸 아이콘 - CSS 설치 방법, 다운로드 주소, 경로

폰트어썸, 편리한 점

일일이 아이콘을 그림 파일로 만들면, 제작 시간도 오래 걸리고 서버 용량도 늘어난다. 

그런데, 이를 간단한 코드로 누가 빌려 준다면? 그것도 아주 간단한 방법으로 삽입할 수 있게 해 준다면?

바로 그것이 폰트어썸이다. 

이 아이콘들은 이미지가 아니다. 폰트처럼 코드로 만들어진 아이콘이다. 

그러므로 용량이 적다. 로딩도 빠르다. 또한 크기와 색 등을 마음대로 바꿀 수도 있다. 

이유는 벡터 형태로 제공해 주기 때문에 크기를 변경해도 깨지질 않는다.

또한 아이콘들의 표준화되어 있어서 방문자가 보기에도 구별하기 쉽다. 

유료 버전으로 업그레이드 해도 되지만 무료 버전만 해도 아이콘 개수가 1600가지나 된다.

(버전 별로 또 다르니 이는 각자 확인해야 함)

바로 이런 점들이 폰트어썸의 편리한 점, 장점이겠다. 

폰트어썸 다운로드와 설치 경로

만약 그누보드를 쓰고 있다면 기본 장착되어 있으므로 따로 다운받을 필요가 없다.

아니라면 아래 홈페이지로 가서 가입하고 다운로드 받아야 한다. 

폰트어썸 주소 : https://fontawesome.com/

사이트로 가면 "Start for Free"를 눌러서 가입한다. 이메일로 가입하는데, 그 후 로그인을 하면 "Your Kits"를 눌러서 다운 받을 수 있다.

사실 설치 경로는 어느 곳에 하든 관계가 없다. 그러나 어차피 CSS 파일이니 CSS 폴더 아래에 새폴더를 만들고 FTP업로드하면 된다. 

만약, 서버에 직접 다운로드 하지 않고 CDN으로 바로 불러 오는 방식으로는 사용할 수 없을까?

있다. 가입하고 CDN을 요청하면 된다. 그러면 이메일로 보내준다. 

(최근엔 개인CDN 코드를 못 받는다는 말도 있으니 확인 바람) [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

(연재 글이므로 아래 링크에서 2편도 함께 보면 유용함)

2편 링크 : http://www.kiss7.kr/siteblog/36

"폰트어썸 - 사용 방법, CSS 수정 방법, 추가 방법"