무료 웹 아이콘 적용하기 (web font, web icon, icomoon, eot, svg, ttf, woff)
웹 페이지를 구성하고 design할 때 text보다 단순한 그래픽의 icon이 더 직관적인 경우가 많습니다. 문제는 이러한 단순한 그래픽의 icon을 직접 구현할 수 없는 노릇입니다. 그래서 이러한 resource를 구매하거나 혹은 무료로 배포되는 것을 사용해야 합니다.
예) windows 8의 modern(metro) ui style design
이러한 icon등을 쉽게 사용할 수 있게 icomoon이라는 사이트가 있습니다.
위와 같이 app에 들어간다음,
의 library에 들어갑니다.
와 같이 Add 혹은 Remove를 눌러 사용여부를 정해야 합니다.
주의)
이부분에서 License를 잘 확인해야 합니다. 일반적으로 CC~로 들어가는 License는 사용에 큰 제약은 없는 것으로 보입니다. 물론, 해당 부분을 사용했다는 고지를 관습적으로 공유할 필요가 있습니다. 즉, 웹 사이트 어느 부분에 "누구의 Library를 사용했으며, 해당 Library의 License는 무었이다."를 명시할 수 있습니다. 아니면 URL에 readme.txt를 넣어두는 것도 좋을듯 합니다. 즉, http://..../readme.txt와 같이 구성할 수 있습니다.
그렇지만, GPL License는 생각보단 복잡할 수 있습니다. 폰트같은 경우에는 GPL#exeption이 적용되기는 하나, 몇가지 이슈사항이 발생할 수 있습니다. 그러니, 몇몇 경우에 대해 GPL의 사용은 그다지 추천하지 않습니다.
선택이 종료되었다면, 아래의 Selection을 실행합니다.
그럼 아래와 같이 선택한 Library가 리스트 됩니다.
리스트 항목을 선택하여, 내부의 icon들을 선택할 수 있습니다.
허나, 일반적으로는 하나의 Library에 대해 모든 icon을 다 사용하고 싶을 겁니다. 그러기 위해, 아래와 같이 모두 선택하기를 시도하면 됩니다.
위와 같이 선택하였다면, 다음의 Library, 위 예에서는 WebHostinHub Glypths도 들어가서 선택해야 합니다.
모든 Library에 대해 선택이 완료되었다면 다음과 같이 Font를 눌려 다운로드를 준비할 수 있습니다.
(시간이 많이 걸릴 수 있으니, 기다려 주세요)
그럼 아래와 같이 Download하여 Icomoon.zip을 다운로드 할 수 있습니다.
압축을 해제하면, 아래와 같습니다.
demo.html을 실행하면 아래와 같습니다.
즉, 내가 선택한 아이콘들이 리스트됩니다.
그럼, 이 아이콘을 적용할 방법은 다음과 같습니다.
위 압축을 해제한 파일에서 필수 파일은 아래와 같습니다.
여기에 test.html을 다음과 같이 구성합니다.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css"></head>
</head>
<body>
<span class="icon-chat"></span>
<span class="icon-comment-fill"></span>
<div class="icon-calendar"></div>
<div class="icon-mail" style="font-size:3em;"></div>
<div class="icon-undo" style="font-size:4em;color:orange;"></div>
</body>
</html>
그럼 아래와 같이 표현됩니다.
즉, div이든 span이든, 아니면 다른 tag가 되든, html element의 class 이름(즉, icon-으로 시작)으로 구분되어 사용되는 것이 확인됩니다. 모든 icon list는 앞선, demo.html을 참고하면 됩니다. 그곳에 icon과 그에 상응되는 class 이름이 있으니, 사용에 큰 무리는 없습니다. 또한 css style을 이용하여 크기와 색을 조정할 수 있습니다.
혹시 style.css나 fonts의 directory 구조를 변경하고자 한다면, style.css를 수정할 수 있습니다. 아래 부분에 그 directory가 명시되기 때문에, 그곳을 수정하면 됩니다.
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
...
[주의]
만일, 한 사이트에서 두개 이상의 font를 사용하고자 한다면, font 이름이 겹칠 수 있습니다.
이런 경우에 대비하여, 위와 같이 Download 옆에 있는 Name을 고유하게 설정하시는 것이 좋습니다.
그리고, 특별한 경우에 대비하여,
style.css를 수정할 필요가 있는데,
class^="icon-"
=>
class^="icon-XXX"
class*=" icon-"
=>
class*=" icon-XXX"
와 같이 수정합니다.
그리고, 그 이후에
.icon-...
=>
.icon-XXX--...
와 같이 수정해 주어야 합니다.
'Web > HTML/HTML5/CSS/Javascript' 카테고리의 다른 글
| css selector (css 선택자) 문법 (0) | 2014.01.20 |
|---|---|
| jquery를 이용하여 li item을 동적으로 추가하기 (0) | 2010.12.09 |
Rss Feed