Description
We make use of an icon font called FontAwesome. This enables us to display icons that are accessible, that don't require an additional HTTP request, that can be styled with CSS (and inherit styling automatically), and which scale without loss of quality.
Usage
An icon can be included within the markup by using the following code:
<i class='fa fa-iconname'></i>
The list of possible icons and their classnames is available at http://fontawesome.io/icons/. Note that these classnames are not prefixed with ips as with other framework classes; they are left with their default names as they appear on the FontAwesome website.
Icons can be used anywhere that HTML can be used. For example, within text, on buttons, in menus and more.
Icon consistency
It is important that icon use remains relatively consistent throughout the suite. This applies to core developers as well as addon developers. If different icons are used for the same purpose (or worse, an icon is used for a purpose different to it's usual purpose), users will become confused by the software.
To help alleviate this, we have a list of icons that we generally refer to when choosing an icon to represent an action. Check this list to see if your action already has an associated icon, and lean towards using that instead of choosing another.
The list below organizes actions, with the title being a general concept. The icon names are FontAwesome icons, without the preceding fa-
Adding
- plus-circle
- plus
Deleting
- times-circle
- trash-o
Editing
- pencil
Reverting
- undo
Go Somewhere
- arrow-right
Open External Link
- external-link
Confirming Yes/No
- check
- times
Permissions
- lock
- unlock
Log In/Sign In
- key
Copy
- copy
Settings
- cog
Flagging On/Off
- flag
- flag-o
Star On/Off
- star
- star-o
Developer/Application
- cogs
Help
- question-circle
Merge
- level-up
Code/PHP/HTML
- code
Mail/Send Mail
- envelope-o
Search
- search
View
- search
Refresh/Reload
- refresh
Execute/Run Now
- play-circle
Easy Mode/Visual Editor
- magic
Report Guide