XEICON 아이콘 폰트 사용하기

- 8/02/2017

아이콘 폰트인 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/xeicon@2.3.1/xeicon.min.css">

CDN이란? : CDN은 Content Delivery Network의 앞글자로 접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨텐츠를 전송받아 트래픽이 특정 서버에 집중되지 않고 각 서버로 분산되도록 하는기술입니다 (구글검색)
소스제공자가 CDN을 전문으로 서비스하는 googleCDN이나 BootstrapCDN, jsdelivrCDN에 소스를 올려놓으면 일반사용자가 제공 되어지는 CDN의 URL을 링크하여 사용하는 방식으로 오픈소스에서 많이 활용되고 있습니다.

다운로드하여 설치

다운로드하여 약간의 커스터마이징을 하거나 오프라인상태에서도 사용하기 위해서는 아이콘 폰트를 다운로드 받아서 설치해야 합니다.

XEICON 사이트에서 아이콘 폰트를 ① 다운로드 받습니다.
다운로드한 아이콘 폰트를 웹사이트의 적절한 위치에 저장을 합니다.
웹사이트의 <head> 태그영역 안에 xeicon.min.css 파일 위치를 아래와 같이 링크를 겁니다.
```
 <link ="stylesheet" type="text/css" href="path/to/xeicon/xeicon.min.css">
```

홈페이지에서 다운로드를 받으면 SASS 파일이 없습니다. SASS파일이 필요하면 ② github에서 소스를 다운로드 받아야 합니다.

사용 방법

사용방법은 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>

Search This Blog

A story only I don't know