Icon fonts ΒΆ
TED uses an icon font to produce scalabale, vector-based icons throughout the site.
Here is a complete list of the currently available icons:
Use in HAML
To include icons in your HAML, please use the icon helper:
= icon 'arrow', 'Arrow label'
The first parameter should be the icon's name, per the icon grid above.
The second parameter is a label. This won't be rendered visibly, but will be announced by screen readers parsing the HTML output. It's only necessary when your icon is otherwise unlabeled.
You can also include an options object with an additional CSS class to be added to the icon element:
= icon 'arrow', :class => 'my-arrow'
Use in Handlebars (JavaScript templating)
A Handlebars helper is also available:
{{icon 'arrow'}}
The Handlebars helper supports two more parameters: a screen reader label (like the markdown helper), and any additional CSS classes as a string:
{{icon 'arrow' 'Arrow Label' 'my-arrow'}}
If you'd like to include an additional CSS class but don't need a screen reader label, please use an empty string as the second parameter:
{{icon 'arrow' '' 'my-arrow'}}
Sass mixins
By default, icons are sized at 40px. To change their size, please
give them a special CSS class (using the helpers above) and then
target that class in your Sass to specify a size using the
icon-size
mixin:
.my-arrow {
@include icon-size(60px);
}