예전에는 아이콘을 만드려면 일일이 이미지작업해야 했으나 요즘에는 그럴 필요가 없다.
무료로 제공되는
그냥 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를 연결 합니다.
'개발도구' 카테고리의 다른 글
가변글꼴과 폰트 사이즈 em 간편하게 변경하기 (0) | 2018.12.03 |
---|---|
내 브라우저 html5 지원정도 테스트 [html5test] (0) | 2018.11.29 |
sublime txt 서브라임 텍스트 ftp 연결 (0) | 2018.11.15 |
무료 웹호스팅 InfinityFree FTP 사용방법 (0) | 2018.11.14 |
Sublime text 설치 및 기본설정 플러그 (0) | 2018.11.12 |
댓글