Icons

Update February 2016: The syntax of the [icon] has changed completely. It now requires a closing tag. Updated syntax follows.

The icon shortcode allows you to easily include an icon from a provided pack of icons (herein called a "bundle"). As of the time of writing, the only icon bundle we support is Font Awesome.

[icon] Attributes:
  • bundle: optional, defaults to fontawesome; the icon pack your desired icon is in
  • title: optional, but recommended; this works like the "title" attribute on all HTML elements or alternative text on images. The text of this attribute will display both as a tooltip on the icon and be rendered invisibly in a screen reader-friendly manner. Accessibility notice: When using an icon inside a link without any other text, you MUST caption your icon with this attribute or the link will be blank to screen reader users and therefore inaccessible!

What needs to go between the opening [icon] and closing [/icon] tags is the machine name of the desired icon from the bundle, plus any modifiers, separated by spaces. You can find the machine names from the list of all recognized icons in the Font Awesome bundle. Machine names are case sensitive.

Recognized modifiers (supported with Font Awesome bundle only):

  • Change size: lg (33% larger than surrounding text), 2x (2x larger), 3x, 4x, 5x
  • Make icon take up a fixed width: fw (good when starting each link in a list with an icon)
  • Stacking related modifiers (advanced): inverse, stack-1x, stack-2x

 


Here are a few examples of code that can be used.

[icon]camera[/icon] Camera

[icon title="Download"]download 2x[/icon]

[icon title="Automobiles prohibited"]ban stack-2x on car stack-1x[/icon]

 

The resulting output.

Camera Download
  Automobiles prohibited