안녕하세요~ 구름군단 티스토리 입니다.^^
오늘 제 블로그 스킨을 수정하는 도중 너무도 좋은 정보를 얻음으로 인해서 공유를 하게 됩니다. 이런 정보는 많은 분들이 공유를 해서 사람들이 사용 할 수가 있도록 해줘야지만 한다고 생각 합니다. 푸헤헤헤:D
제가 얻은 정보는 바로 폰트어썸(Font Awesome)이 라는 것 입니다. 흔히 스킨을 수정하거나 코딩을 하다가보면 블릿 혹은 아이콘이 필요하게 됩니다. 그렇지만 그 아이콘을 일일이 만들거나 계정에 올려서 이미지주소를 따고 붙여넣고 하는 일은 여간 힘든 일이 아닐 수가 없습니다.
그렇기 때문에 필요할 경우에는 특수문자를 사용해줌으로 인해 간단하게 표현을 해주기만 했습니다. 하지만 성에 차는 레이아웃이 아니였습니다. 늘... 부족함이 많이 느껴졌었죠...
하지만 앞으로는 이런 문제를 폰트어썸(Font Awesome)으로 해결을 해 나가려고 합니다. 우하하하하!
폰트어썸(Font Awesome)이 라는 것은 사이트 입니다. 하지만 일반사이트가 아닌 폰트에 사용 할 수 있는 라이브러리 저장소라고 할 수가 있습니다. 간단하게 <head></head> 사이에 소스 한줄만 넣어주고 원하는 곳에 간단하게 한번 더 소스를 넣어주면 바로 아이콘을 사용 할 수가 있습니다.
그럼 조금 더 자세한 설명을 봐보도록 할까요?
무료 폰트 아이콘 폰트어썸(Font Awesome) 사용법을 알아보자!
Link : http://fontawesome.info/
위 사이트는 폰트어썸(Font Awesome) 사이트 입니다. 이 사이트에 접속을 한 뒤에 위에 메뉴를 보면 "Get Started" 라는 메뉴를 볼 수가 있습니다.
이 메뉴를 눌러서 페이지 이동이 되면 그 안에 <link href:"//>로 시작하는 소스를 볼 수가 있습니다. 이소스를 복사해서 웹사이트 혹은 설치형 블로그 상단 <head>, </head> 사이에 넣어주기만 하면 설정은 끝이나게 됩니다.
설치가 끝이 난 뒤에는 상단에 있는 메뉴 중 "icons" 라는 메뉴를 클릭해주면 여러가지 아이콘들이 나와있는 페이지로 이동이 됩니다. 그 중에 "fa-car" 라는 아이콘을 선택했습니다.
<i class="fa fa-car"></i> fa-car
상단에는 아이콘이 사이즈별로 나와있고 그 밑에 위와 같은 소스가 나와있는 것을 볼 수가 있습니다. 이 소스를 긁어다가 아이콘이 노출하고자 하는 문자 앞에 소스를 넣어주면 됩니다.
간단하죠?ㅎ
하지만 여기서 조심해야 할 것이 있습니다. 아이콘 소스 중에 위와 같이 fa로 시작하지 않고..
<i class=" icon-search"></i> icon-search
위에 처럼 icon으로 시작하는 소스가 있습니다. 이런 소스일 경우 3.2.1 버전으로 <head>, </head> 사이에 소스가 하나더 추가가 되어야지만 합니다.
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
위에 소스를 삽입해주면 icon으로 시작하는 아이콘들도 불러올 수가 있게 됩니다.^^
마지막으로 4.0.3 버전은 IE7에서 지원하지 않고 있으며, 3.2.1 버전은 지원이 되고 있습니다. 본인 사이트가 IE7에서 많이 들어올 경우에는 3.2.1 버전만을 사용하시는게 좋겠죠?^^
그럼 폰트어썸(FontAwesome) 많이 활용하세요~ 전 이만 "티스토리 꾸미기, 폰트아이콘을 제공해주는 폰트어썸 사용법!" 포스팅을 마치도록 하겠습니다.^^
-_________-0
IT&모바일, 영화&연극 등 문화 리뷰, 데이트코스/블로그 마케팅에 관한 블로그