Examples
Basic Icons
xi-robotThe example structure looks as follows :
<i class="xi-robot"></i> xi-robot
Resize Icons
The example structure looks as follows :
<i class="xi-shop xi-x"></i>
<i class="xi-shop xi-2x"></i>
<i class="xi-shop xi-3x"></i>
<i class="xi-shop xi-4x"></i>
<i class="xi-shop xi-5x"></i>
Fixed Width Icons
- xi-image
- xi-scooter
- xi-lightning
- xi-facebook
The example structure looks as follows :
<ul class="lst_group bg-primary padding-sm text-white">
<li><i class="xi-image xi-fw"></i> xi-image</li>
<li><i class="xi-scooter xi-fw"></i> xi-scooter</li>
<li><i class="xi-lightning xi-fw"></i> xi-lightning</li>
<li><i class="xi-facebook xi-fw"></i> xi-facebook</li>
</ul>
List Icons
- List Icons
- can be used
- as bullets
- in lists
The example structure looks as follows :
<ul class="xi-ul">
<li><i class="xi-info-triangle xi-li"></i>List Icons</li>
<li><i class="xi-information-circle xi-li"></i>can be used</li>
<li><i class="xi-check-box xi-li"></i>as bullets</li>
<li><i class="xi-check-circle xi-li"></i>in lists</li>
</ul>
Bordered & Pulled Icons
XEIcon is a full shite of 680 pictographic icons for easy scalable vector graphics on websites, created by Junha,Lee, and maintained by XpressEngine.The example structure looks as follows :
<i class="xi xi-thumbs-up xi-2x pull-left xi-border"></i><i class="xi xi-heart xi-2x pull-right 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
The example structure looks as follows :
<i class="xi-shutter xi-2x xi-spin vcenter"></i>
<i class="xi-star xi-2x xi-spin vcenter"></i>
<i class="xi-spinner-5 xi-2x xi-spin vcenter"></i>
<i class="xi-record-play xi-2x xi-spin vcenter"></i>
<i class="xi-snow xi-2x xi-spin vcenter"></i>
<i class="xi-spinner-4 xi-2x xi-spin vcenter"></i></i>
Rotated & Flipped
- normal
- xi-rotate-90
- xi-rotate-180
- xi-rotate-270
- xi-flip-horizontal
- xi-flip-vertical
The example structure looks as follows :
<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>