This guide describes the Best Practices for UI Development on the IRIDA Platform

Font Awesome Icons

The IRIDA UI relies heavily on Font Awesome for font icons.

Commonly Used Icons

What Icon Markup Why?
file <i class="fa fa-file-o fa-fw" aria-hidden="true"></i> Use to refer to a file of non-specific type.
excel <i class="fa fa-file-excel-o fa-fw" aria-hidden="true"></i> Use to refer to an excel file.
remove <i class="fa fa-times fa-fw" aria-hidden="true"></i> Use when performing a non-permanent removal from a list.
delete <i class="fa fa-trash fa-fw" aria-hidden="true"></i> Use when deleting an item permanently from the UI.
merge <i class="fa fa-compress fa-fw" aria-hidden="true"></i> Use for merging files.
copy <i class="fa fa-copy fa-fw" aria-hidden="true"></i> Use for copying an file.
save <i class="fa fa-floppy-o" aria-hidden="true"></i> Use for saving an item
download <i class="fa fa-download fa-fw" aria-hidden="true"></i> Use for downloading an item
warning <i class="fa fa-exclamation-triangle fa-fw" aria-hidden="true"></i> Use to prefix warning messages
id <i class="fa fa-barcode fa-fw" aria-hidden="true"></i> Use for IRIDA identifier
organism <i class="fa fa-leaf fa-fw" aria-hidden="true"></i> Use for IRIDA organisms
date <i class="fa fa-calendar fa-fw" aria-hidden="true"></i> Use for any date or calendar
loading <i class="fa fa-circle-o-notch fa-spin fa-fw"></i> Use for displaying ajax loading
terminal <i class="fa fa-terminal fa-fw" aria-hidden="true"></i> Use for terminal commands
question <i class="fa fa-question-circle fa-fw“ aria-hidden="true"></i> Display a help hover.