아이콘 디자인은 폰트어썸 Fontawesome

아이콘은 폰트어썸 !!

 

 

 

 

 

디자인 아이콘은 구글 머티리얼 디자인에서도 많이 사용하지만 제가 추천을 해드리는 것은 폰트어썸 Fontawesome 사이트입니다.

 

 

 

 

 

폰트어썸은 유료와 무료로 나뉘기 때문에 주의는 필요합니다.

 

유료에서 사용할 수 있는 종류와 이쁜 디자인이 많지만, 무료로 제공해 주는 좋은 아이콘도 많답니다.

 

 

아래 설명은 무료사용 기준입니다.

 

 

먼저 html이나 css의 링크에 필요한 cdn을 준비하는데 필요한 사이트입니다.

 

검색은 구글에서 "fontawesome 4.7 cdn"으로 합니다.

 

아래를 클릭해서 들어가도 됩니다.

 

 

https://www.bootstrapcdn.com/fontawesome/

Font Awesome

 

 

 

이렇게 보이는 사이트에서 아랫쪽에서 cdn을 복사해서 html에 붙여 놓습니다.

 

 

 

 

아니면 미리 준비해 놓은 아래 코드를 복사해서 사용하셔도 됩니다.

 

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

 

 

 

그럼 이제 아이콘을 받으러 fontawesome 4.7 사이트로 갑니다.

 

바로 여기!

 

 

https://fontawesome.com/v4.7.0/

Font Awesome, the iconic font and CSS toolkit

 

 

 

사이트 메인페이지에 들어가고 나서 들어가는 "icons" 메뉴로 들어가서 이제 필요한 아이콘들을 검색해서 사용 하면 됩니다.

 

 

 

 

자주 쓰는 아이콘 중 하나인 햄버거메뉴 버튼.

 

html에 넣을 때는 i태그로 되어있는 소스를 사용하시면 됩니다.

 

 

css의 after나 before에 사용할 때는 unicode 번호를 사용하면 되구요.

 

구글 머티리얼 아이콘에 비해 폰트어썸이 좋은 점이 바로 이것.

 

유니코드 번호를 제공한다는 점!!

 

 

 

 

아이콘의 경우 이미지로 하여도 사이즈가 작기 때문에 인터넷 로딩속도를 고려하면 소스를 코드에 사용하는 것 보다 바로 이미지를 사용하는 것이 낫습니다.

 

after나 before에 사용할 수 있는 것은 unicode가 편할 때가 많습니다.

아니면 배경이미지로 넣으면 되구요.

유니코드를 사용할 때는 "font-famliy: fontAwesome;"을 넣어주어야 해당 아이콘이 나타납니다.

 

폰트어썸5.0에는 더 다양한 아이콘이 있지만 유료와 무료가 같이 있고,

폰트어썸 4.7 사이트에는 아이콘들이 모두 무료이기 때문에 유료와 무료를 구분할 필요없는 편리함이 있습니다.

 

그래도 필요하신 분들이 있으실까봐 링크는 달아 놓았습니다.

 

 

https://fontawesome.com/

Font Awesome

 

 

 

이것으로 폰터어썸에 대한 설명은 마치겠습니다.