XEIcon, 문자를 그리다

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>

EXAMPLES

기본 아이콘

크기 조절 아이콘

넓이 고정 아이콘

리스트 아이콘

아이콘 테두리 및 들여쓰기

자동 회전 아이콘

고정 회전 아이콘