IcoMoon 서비스가 더 좋다는 판단에 의해서 IcoMoon 서비스 위주로 설명하게 되었다.
Fontello 서비스는 직접 체험하거나 검색해보고 사용하길 바란다.

아이콘 폰트 만들기 과정

http://icomoon.io/ 사이트에 접속한다.

우측 상단의 "IcoMoon App" 버튼을 선택한다.

IcoMoon App화면으로 이동하는데 사용하고싶은 아이콘을 선택한다. 실제로 홈페이지 아이콘을 삽입하려는 아이콘만 선택하면 되는것이다.
오른쪽 부분의 눈 아이콘 옆에 숫자가 있는부분은 아이콘의 사이즈인데 더 자세히 보고싶거나 작게 보고싶으면 크기를 조절할 수 있다.
아이콘을 많이 선택할수록 용량이 그만큼 늘어나니 꼭 사용할것들만 선택하자.

만약 App에 나와있는 아이콘보다 더 많은 아이콘들을 목록에 가져오고싶을 경우엔 맨 아래로 내려가면 빨간색 글자로 "Add Icons From Library…"라는 글자를 볼 수 있는데 클릭하면 Library 페이지로 넘어가는데 아이콘팩을 목록에 추가할 수 있다. (듣기로는 프리미엄 서비스를 이용하면 더 많은 아이콘팩을 볼 수 있다는 얘기도 보인다. 확실하진 않지만…)

아이콘 선택을 다했으면 맨아레에 “SVG”와 “Font”버튼이 있는데 “Font”버튼을 누르자.
SVG는 svg 벡터방식의 파일포맷으로 저장한다. (일러스트레이터 프로그램으로 열 수 있거나 다른 용도로도 활용할 수 있다. 예를들어 다른 아이콘폰트 제작 서비스에서도 사용할 수 있다는것이다.)

Font 버튼을 눌러서 선택한 아이콘만 목록에 나오게 되었다.

Quick Usage 섹션은 선택한 폰트파일과 css를 IcoMoon에서 저장되어 css주소만 알려주어 사용하는 유저들은 css를 로드하고 바로 사용할 수 있는 서비스다.
하지만 무료 서비스는 영구적으로 파일을 저장할 수 없기때문에 어느정도 시간이 지나면 IcoMoon 서버에 저장된 파일들은 삭제되어버리니 만약 폰트를 다른곳에서 올리기 힘들거나 IcoMoon서버에서 간편하게 사용하고 싶으면 프리미엄 서비스를 신청하는것도 좋은 방법이다. (그 외에도 프리미엄 서비스는 여러가지 혜택을 누릴 수 있다.)

Quick Usage 아래 섹션인 아이콘 목록 섹션에서 최종적으로 확인하고 디테일한 부분에 대한 수정하는 섹션이다. 여기서 아이콘의 이름을 변경하거나(아이콘 이름은 css의 class 이름이 된다.) 필요없는 아이콘은 뺄수도 있다.
만약 아이콘을 좀더 추가하고싶으면 맨 아래에 “Selection”버튼을 누르면 3번항목의 모든 아이콘이 나온 페이지로 이동한다.

아이콘에 대해서 모든걸 확인이 끝났으면 아래에 “Download”버튼을 누르면 zip파일 하나가 다운로드된다.
압축을 풀어보면 아래 그림과 같이 파일들을 확인할 수 있다.

demo.html 파일을 실행해보면 아래 그림과같이 브라우저에서 만들었던 아이콘폰트의 목록을 확인할 수 있다.

---

이상으로 IcoMoon서비스를 이용하여 아이콘폰트를 알아봤다.

아이콘폰트 만들기 관련링크

• 개요
• 아이콘폰트를 서버에 올리고 적용시키기
• 직접만든 아이콘을 아이콘폰트로 등록하기