XEICON 아이콘 폰트 사용하기
아이콘 폰트인 XEICON을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다.
XEICON
한 시대를 풍미했던 PHP 무료게시판 서비스인 제로보드가 네이버의 서포트를 받으면서 Xpressengine 바뀌었습니다.
XEICON은 그 Xpressengine에서 서비스를 제공하고 있는 아이콘 폰트 서비스 입니다.
제공하는 방법과 사용 방법이 폰트어썸 (Font Awesome)과 거의 흡사하여 폰트어썸 (Font Awesome)을 사용해 본 사람이라면 매우 쉽게 사용을 할 수 있습니다.
반대로 영어에 좀 취약한 사람이라면 XEICON이 한글로 되어 있기 때문에 먼저 XEICON를 사용해 보고 폰트어썸 (Font Awesome)을 사용하면 이해가 빠를 것입니다.
다만 주의 할 점은 LGPL라이선스를 따른다는 것입니다. LGPL라이선스는……
설치 방법
설치는 크게 2가지로 나누어지는데.. CDN을 통해서 설치하는 방법과 아이콘 폰트를 다운로드받아서 설치하는 방법이 있습니다.
CDN 설치
가장 간단하게 사용할 수 있는 CDN설치는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다.
XEICON의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad>태그 영역에 styleseet를 불러오는 것 처럼 링크를 걸어주면 됩니다.
-
웹사이트의
<head>태그영역 안에 아래의 코드를 삽입합니다.<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/xpressengine/[email protected]/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>
