icon font 제작 -개요-
- Nest
- Development
- Category
- html/css
- Hit
- 924
- Star
- 0
누구나 다 사용자 글꼴(custom font)를 만들어서 자신만의 특정한 아이콘이 담긴 글꼴을 만들어 사용할 수 있다.
아이콘 폰트의 장점
- 아이콘들을 미리 글꼴로 등록해두고 필요한 아이콘을 글꼴 설정으로 손쉽게 사용할 수 있기 때문에 별도의 이미지를 저장할 필요없다.
- 글꼴이 벡터방식이므로 사이즈를 아무리 키워도 형태가 전혀 깨지지 않는다.
- 아이콘을 부르고 다양한 색상으로 변경할 수 있다.
아이콘 폰트를 바로 사용하는 Font Awesome 아이콘 프레임워크
- 사이트 : http://fontawesome.io/
아이콘 글꼴을 간단하게 사용할 수 있게 서비스를 제공한다.
head태그에서 Font Awesome에서 제공하는 css를 삽입하고, 정해진 규칙의 태그<i class=“icon-folder”></i>
를 원하는 곳에다 넣으면 짠~ 하고 아이콘이 나온다.
Font Awesome 사이트에서 사용하는 아이콘을 대부분 사용하고 싶다면 Font Awesome서비스를 이용하는것도 좋아보인다. 하지만 아이콘을 몇개 사용하지도 않고, 또 다른 아이콘을 섞어서 사용하고 싶으면 직접 아이콘 글꼴을 만들어 사용하면 된다.
커스텀 아이콘 폰트 제작 서비스
폰트를 만드는 방법은 여러가지 존재하지만 보통은 쉽지않다.
특별한 프로그램을 설치해야하고 알아야할것들이나 준비과정이 많다. 그래서 온라인 아이콘폰트를 제작해주는 서비스에서 만드는것이 훨씬 쉽다!
커스텀 아이콘 폰트를 만드려면 약간의 많은 준비작업이 필요하다. 하지만 글꼴을 만드는것이 불가능한게 아니라는 점이 다행인것이다. 무엇보다 웹폰트를 만들어주는 서비스가 몇군데 존재한다.
- IcoMoon: http://icomoon.io/
- Fontello: http://fontello.com/
두 사이트 모두 유사한 형태라고 봐도 좋지만 서비스나 사용하는 방법은 약간의 차이를 보이고 있다. 무엇보다 아이콘의 스타일이 틀리기 때문에 입맛대로 선택하는것이 좋을것같다.
필자는 IcoMoon 서비스가 더 좋다는 판단에 의해서 IcoMoon 서비스 위주로 설명하겠다. Fontello 서비스는 직접 체험하거나 검색해보고 사용하길 바란다.