무료로 아이콘 폰트 사용하기 - XEICON 편
웹사이트를 개발 시 아이콘을 제작하려고 하는데 딱히 디자이너가 없는경우~, 아이콘을 사용하고 싶은데 라이선스를 구매하기 어려운경우~
이렇때 고맙게도 무료이면서 간단하게 아이콘을 사용할 수 있는 방법이 있습니다.
대표적으로 폰트어썸이 있지만 우리나라에서도 서비스를 해주는 곳이 있습니다. 바로 XEICON 입니다.
XEICON
XEICON은 예전에는 제로보드로 이름을 날렸고 현재는 Xpressengine이라는 브랜드네임으로 서비스를 하고 있는 XE프로젝트에서 Fonts형 아이콘 형태로 무료 서비스를 하고 있는 웹사이트입니다.
이 XE프로젝트는 현재 네이버에서 서포트를 받고 있기 때문에 쉽게 사라지지는 않을 듯 합니다.
Fonts형 아이콘을 무료로 제공하고 있는 원조격인 폰트어썸과 사용방법이 거의 비슷해서 폰트어썸을 사용해 봤던 사람이라면 쉽게 적용을 할 수 있습니다.
설치 방법
설치는 크게 2가지로 나누어지는데.. CDN을 통해서 설치하는 방법과 아이콘 폰트를 다운로드받아서 설치하는 방법이 있습니다.
CDN 설치
가장 간단하게 사용할 수 있는 CDN설치는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다.
XEICON의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad>태그 영역에 styleseet를 불러오는 것 처럼 링크를 걸어주면 됩니다.
다만 인터넷이 연결된 곳에서만 사용이 가능하지 인터넷이 되지 않는 곳에서는 오류가 발생합니다.
웹사이트의
<head>태그영역 안에 아래의 코드를 삽입합니다.<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
소스제공자가 CDN을 전문으로 서비스하는 `googleCDN`이나 `BootstrapCDN`, `jsdelivrCDN`에 소스를 올려놓으면 일반사용자가 제공 되어지는 CDN의 `URL`을 링크하여 사용하는 방식으로 **오픈소스**에서 많이 활용되고 있습니다.
다운로드하여 설치
다운로드하여 약간의 커스터마이징을 하거나 오프라인상태에서도 사용하기 위해서는 아이콘 폰트를 다운로드 받아서 설치해야 합니다.
XEICON 사이트에서 아이콘 폰트를 ① 다운로드 받습니다.
다운로드한 아이콘 폰트를 웹사이트의 적절한 위치에 저장을 합니다.
웹사이트의
<head>태그영역 안에xeicon.min.css파일 위치를 아래와 같이 링크를 겁니다.<link ="stylesheet" type="text/css" href="path/to/xeicon/xeicon.min.css">
사용 방법
사용방법은 CDN 설치를 사용했던, 다운로드 설치를 사용했던 동일한 방법으로 사용할 수 있습니다. 아이콘이 나타나기를 원하는 위치에 아래의 코드 처럼 삽입하면 됩니다.
기본 적용
<i class="xi-xpressengine"></i> xpressengine </i><i>태그에 class명으로 아이콘의 종류를 선택할 수 있습니다.
class를 설명하자면 xi-다음에 나오는 글자는 아이콘명을 의미합니다.
아이콘은 2가지 버전이 있으며 아래에서 확인 할 수 있습니다.
아이콘 크기변경 (Larger Icons)
xi-x, xi-2x, xi-3x, xi-4x, xi-5x CLASS를 적용하여 기본 크기 외에 다양한 크기의 아이콘을 나타낼 수 있습니다.
<i class="xi-face xi-x"></i> xi-x
<i class="xi-face xi-2x"></i> xi-2x
<i class="xi-face xi-3x"></i> xi-3x
<i class="xi-face xi-4x"></i> xi-4x
<i class="xi-face xi-5x"></i> xi-5x아이콘 넓이고정 (Fixed Width Icons)
xi-fw CLASS를 적용하여 아이콘의 종류와 상관없이 좌우측 공백 포함 넓이를 고정하여 리스트를 깔끔하게 보이게 정리할 수 있습니다.
<ul class="lst_group">
<li><i class="xi-image xi-fw"></i> Image</li>
<li><i class="xi-movie xi-fw"></i> Video</li>
<li><i class="xi-headset xi-fw"></i> Sound</li>
<li><i class="xi-pen xi-fw"></i> Text</li>
</ul>리스트 블릿 변경 (List Icons)
UL 또는 OL 사용 시 기본으로 나오는 블릿을 제거하고 xi-ul와 xi-li CLASS를 적용하여 아이콘으로 대체를 할 수 있습니다.
<ul class="xi-ul">
<li><i class="xi-list xi-li"></i>List Icons</li>
<li><i class="xi-info-o xi-li"></i>can be used</li>
<li><i class="xi-check-circle-o xi-li"></i>as bullets</li>
<li><i class="xi-emoticon-happy-o xi-li"></i>in lists</li>
</ul>테두리 적용과 좌측 또는 우측 고정 아이콘 (Bordered & Pulled Icons)
xi-border CLASS로 아이콘의 테두리를 표시 할 수 있고 pull-left 또는 pull-right CLASS로 아이콘을 좌측 또는 우측으로 붙힐 수 있습니다.
<i class="xi xi-message xi-3x pull-left xi-border"></i>
XEIcon is a full shite of 680 pictographic icons for easy scalable vector graphics on websites, created by Junha,Lee, and maintained by XpressEngine.아이콘 애니메이션 (Animated Icons)
xi-spin CLASS를 적용하여 아이콘에게 움직이는 회전 애니메이션을 적용할 수 있습니다.
<i class="xi-spinner-1 xi-spin"></i>
<i class="xi-spinner-2 xi-spin"></i>
<i class="xi-spinner-3 xi-spin"></i>
<i class="xi-spinner-4 xi-spin"></i>
<i class="xi-spinner-5 xi-spin"></i>아이콘 회전 (Rotated & Flipped)
xi-rotate-90, xi-rotate-180, xi-rotate-270, xi-flip-horizontal, xi-flip-vertical CLASS를 적용하여 아이콘을 회전 시키거나 좌우 또는 상하 반전을 시킬 수 있습니다. 애니메이션이 되지는 않습니다.
<ul class="lst_rotate">
<li><i class="xi-note"></i>normal</li>
<li><i class="xi-note xi-rotate-90"></i>xi-rotate-90</li>
<li><i class="xi-note xi-rotate-180"></i>xi-rotate-180</li>
<li><i class="xi-note xi-rotate-270"></i>xi-rotate-270</li>
<li><i class="xi-note xi-flip-horizontal"></i>xi-flip-horizontal</li>
<li><i class="xi-note xi-flip-vertical"></i>xi-flip-vertical</li>
</ul>