아이콘 컴포넌트는 4가지의 색상과 2가지의 크기 그리고 한가지의 포지션 옵션을 제공합니다.
<i class="icon-name">
<i class="icon-name icon-large">
<i class="icon-name icon-white">
<i class="icon-name icon-white icon-large">
<i class="icon-name icon-white icon-large icon-edge">
| Name | Icon | Icon-White | Icon-Purple | Icon-Gray |
| loading | ||||
| new-window | Test | |||
| gear | ||||
| calendar | ||||
| download | ||||
| upload | ||||
| hide | ||||
| refresh | ||||
| printer | ||||
| search | ||||
| home | ||||
| pause | ||||
| play | ||||
| check | ||||
| chevron-right | ||||
| chevron-left | ||||
| plus | ||||
| trashcan | ||||
| edit | ||||
| help | ||||
| return | ||||
| dashboardlist | ||||
| realtime | ||||
| arrow1 | ||||
| arrow2 | ||||
| arrow3 | ||||
| close | ||||
| left | ||||
| right | ||||
| resize | ||||
| exit | ||||
| more | ||||
| chart | ||||
| link | ||||
| image | ||||
| table | ||||
| html | ||||
| align-left | ||||
| align-center | ||||
| align-right | ||||
| orderedlist | ||||
| unorderedlist | ||||
| textcolor | ||||
| underline | ||||
| italic | ||||
| bold | ||||
| text | ||||
| preview | ||||
| document | ||||
| refresh2 | ||||
| add-dir | ||||
| add-dir2 | ||||
| save | ||||
| stop | ||||
| stop |
버튼이나 라벨과 같은 컴포넌트 안에서 우측 끝에 아이콘을 보여주고 싶다면, icon-edge 옵션을 사용하면 됩니다.
Button Button
<a class="btn btn-gray" style="width: 200px;">Button <i class="icon-chevron-right icon-edge"></i></a>
<span class="label label-purple" style="width: 200px;">Button <i class="icon-chevron-right icon-white icon-edge"></i></span>