나만의 아이콘 폰트를 만들어보자 - Fontello.com
웹페이지를 만들면서 보다 직관적인 표현을 위해 아이콘을 사용하는 경우가 많습니다.
구시대 웹에서는 일일히 이미지를 삽입하는 방식을 많이 사용했지만, 용량문제 뿐만 아니라 사용의 편의성도 떨어져서
요즘에는 아이콘 폰트를 많이 사용합니다.
아이콘폰트란, 아이콘들로 이루어진 폰트를 만들어 아이콘을 마치 하나의 글자처럼 표현하는 방식입니다.
그 예로 현재 이 블로그에는 Font Awesome이라는 아이콘 폰트가 적용되어있습니다.
그러나 이미 만들어진 아이콘폰트는 사용하기 편리하지만 정작 원하는 아이콘이 없을 수도 있고, 불필요한 아이콘까지 로딩되기 때문에 자원낭비가 되기도 합니다.
지금부터 소개해드릴 Fontello라는 사이트는 직접 제작한 아이콘을 업로드하거나, 이미제작되어있는 아이콘폰트 중에서 원하는 아이콘들을 조합하여
나만의 아이콘 폰트를 만들어 주는 사이트입니다.
나만의 아이콘 조합하기
먼저 http://fontello.com/ 사이트에 접속합니다.
이미 만들어진, 무료폰트아이콘들이 나열되어있습니다. 자신이 사용할 아이콘들을 선택하면됩니다.
.svg형식의 폰트나, 본인이 제작한 svg형식의 아이콘을 드래그해서 업로드 할 수도 있습니다.
선택을 완료했으면 Customize Names 탭으로 이동합니다.
아이콘폰트는 주로 class라는 속성으로 표현하게됩니다. 그 때 사용할 이름을 여기서 수정할 수 있습니다.(영문)
Customize Codes 탭에서는 유니코드 속성을 수정할 수 있습니다.
웬만하면 건드리지 말고 오른쪽 위의 Download webfont 버튼을 클릭해 완료합니다.
다운받은 압축파일을 풀어보면 웹폰트와 함께 아이콘폰트 구현에 필요한 자료들이 들어있습니다.
demo.html을 실행하면 아이콘들의 이름을 다시 확인할 수 있으니, 이 파일을 지우지 말고 잘 보관해두세요.
아이콘 폰트의 적용
티스토리 기준으로 설명합니다.
원래 폰트와 css를 업로드해야하지만, 간단하게 css폴더에있는 fontello-embeded.css파일만 업로드 해도 됩니다.
skin.html에서
</head> 윗줄에 다음 구문을 붙여넣습니다.
<link href="./images/fontello-embedded.css" rel="stylesheet" />
이러면 일단 적용은 끝이납니다.
아이콘 폰트의 사용
아이콘은 html의 class에 아이콘 이름을 넣으면 나타납니다. 주로 <i>태그 혹은 <span>태그를 사용합니다
예)
<i class="아이콘이름"></i>
또는
<span class="아이콘이름"></span>
예를들어 이렇게 제목 앞에 <i class="ico-emo-happy"></i>를 입력하면
제목 왼쪽에 이렇게 아이콘이 나타나게됩니다.
추가사항
이렇게 적용한 아이콘폰트는 IE는 9이상 버전에서만 나타납니다.
구버전 IE7에서도 아이콘폰트가 나타나게 하려면 .eot 폰트를 업로드하고 css파일의 .eot폰트 경로를 수정한 뒤,
fontello-ie7.css도 적용하면 됩니다.
IE7에서도 아이콘폰트를 지원하려는 분이라면 알아들으셨을거라 믿습니다!
