Icon
Description
We have provided a set of icons for use.
Name | Enabled Icon | Disabled Icon | CSS Class Name |
---|---|---|---|
Admin | N/A | icon gear | |
Alert | N/A | icon alert | |
Calendar | N/A | icon cal | |
Document |
icon doc |
||
Edit | icon pencil icon pencil_disabled |
||
Error | N/A | icon error | |
Information | N/A | icon info | |
Open New Window | N/A | icon newwin | |
N/A | icon print | ||
Search | icon search icon search_disabled |
||
Add/Remove | icon plus icon plus_disabled icon minus icon minus_disabled |
||
Appprove/Deny Enable/Disable |
icon check icon check_disabled icon disable icon disable_disabled |
||
Delete | icon trash icon trash-disabled |
||
Expand/Collapse | N/A |
icon arrow_right |
|
Submit | icon submit icon submit_disabled |
||
Undo | N/A | icon undo |
Sample
Refer to the image indirectly via CSS enhances maintainability. Just need to make sure to apply the appropriate style classes.
An icon with text:
edit delete
<span class="icon pencil" title="edit">edit</span><span class="icon trash" title="delete">delete</span>
An icon with text link:
<a href="#" class="icon pencil" title="edit">edit</a><a href="#" class="icon trash" title="delete">delete</a>
An icon without text.
<span class="icon pencil" title="edit"></span><span class="icon trash" title="delete"></span>
An icon without text link.
<a href="#" class="icon pencil" title="edit"></a><a href="#" class="icon trash" title="delete"></a>