아이콘 쉽게 만들기_Fontawesome::::수학과 사는 이야기

블로그 살결을 다듬을 때 아이콘이 필요하다. 개인적으로 이미지가 없는 가벼운 살결을 좋아하지만 모두를 텍스트로 만들면 아무래도 볼품이 조금 아쉽다. 내 블로그 살결에 있는 몇몇 아이콘은 손으로 그려서 스캔한 것이다. 아무래도 정교함이 떨어진다. 이런 저런 검색으로 아이콘을 아주 쉽게 만들 수 있는 방법을 찾았기에 소개한다.

http://fontawesome.io/icons/

연결고리를 따라 들어가면 아래와 같은 아이콘을 만난다.

Fontawesome에서는 오로지 CSS만으로 위에 있는 벡터 아이콘을 만들고 크기와 빛깔을 바꿀 수 있다. 그림자까지 넣을 수 있다. 보고 있는 블로그 사이드바에 있는 목록 앞에 달린 그림이 이렇게 만든 것이다. 쓰는 방법도 아주 간단하다. 먼저 이 사이트에 이메일로 인증을 받으면 자바 스크립트를 얻을 수 있다. skin.html 파일을 열어 아래 스크립트를 <head>와 </head> 사이에 넣어서 인증 받은 코드 이름을 가진 0000.js 파일을 불러들인다.

<script src="https://use.fontawesome.com/0000.js"></script>

다음으로 아이콘을 넣을 자리에 아래와 같이 입력하면 카메라 아이콘이 나타난다.

크기를 바꾸려면 아래와 같이 입력하면 된다.

fa-lg
 fa-2x
 fa-3x
 fa-4x
 fa-5x

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

더 자세한 보기는 http://fontawesome.io/examples/에서 공부할 수 있다.

저작자표시 비영리 변경금지

꼬리표

티스토리툴바