Skip to main content

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

Edit     icon pencil
icon pencil_disabled
Error   N/A icon error
Information   N/A icon info
Open New Window   N/A icon newwin
Print   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
icon arrow_down

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>