EXAMPLES

예제에 소개된 클래스를 이용하여 각 기능을 손쉽게 이용할 수 있습니다.

기본 아이콘


xi-xpressengine

i 태그내에 xe 아이콘 명을 클래스로 기재합니다.

<i class="xi-xpressengine"></i>  xpressengine </i>

크기 조절 아이콘


  • xi-x
  • xi-2x
  • xi-3x
  • xi-4x
  • xi-5x

클래스에 따라 아이콘의 크기를 조절할 수 있습니다.

<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

넓이 고정 아이콘


  •   Image
  •   Video
  •   Sound
  •   Text

“xi-fw” 클래스를 통해 서로 다른 아이콘들의 넓이값을 고정합니다.

<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
  • can be used
  • as bullets
  • in lists

클래스 “xi-ul”, “xi-li”를 사용하여 기본 list-type을 대체하여 사용할 수 있습니다.

<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>

아이콘 테두리 및 들여쓰기


XEIcon is a full shite of 680 pictographic icons for easy scalable vector graphics on websites, created by Junha,Lee, and maintained by XpressEngine.

“xi-border”와 “pull-left” 또는 “pull-right”를 사용하여 문장에 앞에 쓰일 수 있는 아이콘의 보더 효과와 들여쓰기를 이용할 수 있습니다.

<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.

자동 회전 아이콘


클래스 “xi-spin”을 사용하여 xe에서 제공하는 아이콘을 자동회전 시킬 수 있습니다.

<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>

고정 회전 아이콘


  • normal
  • xi-rotate-90
  • xi-rotate-180
  • xi-rotate-270
  • xi-flip-horizontal
  • xi-flip-vertical

원하는 각도 및 반전 효과를 각 클래스를 추가하여 이용할 수 있습니다.

<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>
위로가기