본문 바로가기
개발도구

fontawesome4 폰트어썸 다운및 사용방법

by mooyou 2018. 11. 23.
728x90
300x250

 

예전에는 아이콘을 만드려면 일일이 이미지작업해야 했으나 요즘에는 그럴 필요가 없다.

무료로 제공되는

 

그냥 fontawesome에 가면 무로로 제공되는 다양한 아이콘들이 있고

폰트사용하듯이 쉽게 사용가능하다.

 

 

 

 

 

 

 

 

검색창에 fontawasome cdn을 검색한 후에

 

Font Awesome ㆍBootstrapCDN by StackPath

사이트로 들어갑니다.

 

 

 

 

 

그러면 메인에 이런화면이 나오는데

우측 화살표를 눌러주세요

 

 

 

 

 

 

 

여기서 HTML 부분을 복사해서

제작 중인 사이트 HEAD 부분에 링크해줍니다.

 

 

 

 

 

 

그런 다음 font awesome icon 4.7을 검색하고

Font Awesome, the iconic font and CSS toolkit 사이트로 들어갑니다.

 

 

 

 

 

 

 

 

 

 

 

fontawesome4 사이트가 나옵니다.

여기워 원하는 아이콘을 선택하세요

 

 

 

 

 

 

 

 

 

그러면 하단에 이렇게 코드가 나옵니다.

 

 

 

 

그부분을 복사해서 원하는 위치에 붙여넣기 합니다.

 

 

 

 

 

 

 

 

 

짠! 이런식으로 붙여넣기만 하면 아이콘이 나옵니다.

 

 

 

 

이번에는 로컬로 다운 받아서 내 계정에서 연결시키는 방법을 알아보겠습니다.

 

 

 

 

 

 

 

 

 

 

폰트어썸4 사이트 메인에서 down을 클릭합니다.

Font Awesome5로 가라 유혹하지만

제일 하단에 No thanks, just download Font Awesome4를 클릭합니다.

 

 

 

 

 

 

 

 

 

다운받은 폴더를 열어보면 다양한 폴더가 들어있습니다.

 

css 폴더에서 font-awesome.css를

내 css 폴더로 복사해 줍니다.

 

 

 

 

font폴더에 있는 폰트도 다 복사해 줍니다.

 

 

 

 

 

 

서버에 업로드 한 후

font-awsome.css를 연결 합니다.

 

 

 

 

728x90
반응형

댓글