icon font 제작 "아이콘폰트를 서버에 올리고 적용시키기"

IcoMoon 서비스를 통하여 아이콘폰트를 받았으면 아래 그림과 같은 형태로 파일들이 준비되어 있을것이다.

이제부터 아이콘폰트를 ftp를 사용하여 웹서버에 업로드하고, css를 수정하여 실질적으로 홈페이지에 적용시키는 방법에 대해서 설명한다.

IcoMoon 서비스에서 받은 압축을 풀고, demo.html파일을 실행해서 제대로 아이콘이 들어있는지 확인해본다.
만약 아이콘이름이 마음에 들지않거나 아이콘 목록을 수정하고 싶으면 IcoMoon App 페이지로 가서 다시 정보를 수정하고 다운로드 받는다.

선택하고 수정했던 정보는 기억하고 있으니 부담없이 다시 다운로드 받을 수 있다.

icomoonxxxxx 이름으로 된 폴더 이름를 알아보기 편한형태로 변경한다. 필자는 iconfont로 변경하겠다.

iconfont 폴더를 ftp를 통해서 웹서버에다 업로드한다. 필자가 웹서버에 파일을 올려서 폴더 경로가 /css/icofont/가 되었다.

demo.html 파일을 텍스트에디터 프로그램으로 열어보면 많은 도움이 된다. 일단 열어두자.

먼저 출력시킬 페이지를 만든다. 필자는 sample.html으로 파일을 만들었다.

아이콘 폰트를 불러들이는 css파일을 로드한다.

아이콘 폰트를 부르는 주요 css코드는 style.css파일에 다 들어있으므로 <head>태그속에 아래와같은 코드를 삽입한다.

<head>
    <link rel="stylesheet" href=“/css/icofont/style.css”>
</head>

css파일을 로드했으니 원하는곳에다 태그를 입력한다. 여기에서 demo.html 페이지의 내용이 도움이 된다.
demo.html 파일의 내용을 확인해보면 class 이름에서 icon-xxx 라는 태그를 확인할 수 있다.

<span class="icon-twitter"></span>

이 태그만으로 아이콘을 출력할 수 있다는것을 볼 수 있다. 그러므로 demo.html 파일을 열때 목록에서 아이콘 옆 큰 글자로 나와있는 이름이 클래스명이 되는것이다.

그래서 아이콘을 출력할곳에다가 아래와 같이 태그를 만들어넣는다.

<span class="icon-twitter"></span>
<span>Twitter</span>

문제가 없으면 아래 그림과같이 아이콘과 텍스트가 출력된다.

여기서 아이콘을 스타일시트로 아이콘 사이즈를 조절하거나 색상을 바꿀 수 있다. 그래서 사이즈를 좀더 키우고, 녹색의 트위터의 아이콘으로 바꾸겠다.
아래는 css 스타일시트 코드

.icon-twitter {font-size: 52px; color: green;}

문제없이 적용되었다면 아래와 같이 크고 녹색의 트위터 아이콘을 확인할 수 있을것이다.

내용은 거창하게 적었지만 사실 아이콘폰트를 적용시키는 방법은 별거없다.
css를 로드하고, css이름이 정확하게 적힌 태그만 집어넣으면 끝이다. 혹시 모르니 샘플코드가 들어있는 예제파일을 첨부로 올릴테니 참고바란다.

붉은거위 노트 (redgoose note)