Font Awesome ?
크기, 색상, 그림자 및 기타 CSS 기능을 사용하여 디자인을 자유롭게 변경할 수 있는 Font 형식의 벡터 아이콘입니다.
벡터 방식이기 때문에 크기의 변화에 따라 아이콘의 모양이 깨지거나 변하지 않으며, 자바스크립트(javascript)를 사용하지 않아 브라우저 호환성에도 영향을 받지 않습니다. 4.7.0 버전 기준, 675개의 폰트가 지원 되고 있으며, 상업적인 용도로도 무료로 사용 가능합니다.
설치하기
1. 파일 다운로드 후 직접 적용
Font Awesome 공식 홈페이지에서 파일을 직접 다운로드 하여 티스토리 파일 추가 및 css 적용하는 방법입니다.
공식 홈페이지 메인의 Download 버튼을 눌러 뜬 팝업에서 'No thanks, just download Font Awesome' 를 눌러 파일을 다운로드하여 압축을 푼 다음, 관리 > HTML/CSS 편집 > 파일추가에서 파일을 모두 추가합니다.
마지막으로 HTML 편집에서 <head> 와 </head> 사이에 아래와 같이 CSS 파일을 적용시켜줍니다.
( 경로가 다를 경우 파일 경로에 맞춰 변경해주세요.)
2. CDN 파일 링크 연결
CDN 서버에 올려져 있는 파일을 연결해 사용하는 방식으로 파일을 다운로드 하여 직접 적용하는 방식보다 간단하므로 개인적으로는 이 방법을 추천합니다.
방법은 아래 링크 태그를 복사하여 관리 > Html/CSS 편집 > HTML 편집에서 <head> 와 </head> 사이에 붙여넣으면 바로 사용이 가능합니다.
사용법
사용법은 매우 간단합니다. 아래 코드와 결과물을 확인해보세요.
어때요, 참 쉽죠? ㅎㅎ
그리고 위에서 소개했다시피 우리는 Font Awesome에서 무료로 제공해주는 675개의 폰트를 자유롭게 사용할 수 있습니다. 자세한 폰트 이미지와 클래스명을 보시려면 공식 홈페이지의 Icons 메뉴를 참고해주세요.
응용
Font Awesome은 벡터 아이콘이므로 CSS를 이용하여 다양한 방법으로 사용이 가능합니다.
기본적으로 색상을 바꾸거나 크기를 줄이거나 키울 수 있죠. 아래 그 중 한 예를 아래 첨부하였습니다. 더욱 더 다양한 방법으로 사용하는 법을 알고 싶다! 하시는 분들은 이 또한 친절하게 Examples 메뉴에서 그 레퍼런스를 제공해주고 있으니 참고하시기 바랍니다.
'블로그' 카테고리의 다른 글
| 네이버 검색노출 높이는 법 - 웹마스터 도구에 추가하기 (0) | 2017.01.09 |
|---|---|
| [티스토리] 반응형 스킨 #1 카테고리 및 검색 버튼 클릭시 무반응 문제 해결법 (4) | 2017.01.09 |