Jump to content

Guides

Icons

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


×