Icon

Help visually distinguish and provide extra meaning to certain items or actions. You can pass an icon name or mime type to generate the appropriate icon.

Pulsar currently uses Font Awesome 4.6.3. Older 3.2.1 icons are still supported and are mapped to their newer version 4 icon.

Example usage

{{ html.icon('save') }}

{{ html.icon('application/msword') }}

Options

Mime types

Supported mime types include

Icon sizes

Icons inherit their size and colour attributes from their parents and can be nested within other helpers, like buttons, links and tabs.

<!-- Icon inherits size from parent -->
<h1>{{ html.icon('info-sign') }} Example Heading</h1>
<h2>{{ html.icon('info-sign') }} Example Heading</h2>
<h3>{{ html.icon('info-sign') }} Example Heading</h3>
<h4>{{ html.icon('info-sign') }} Example Heading</h4>
<h5>{{ html.icon('info-sign') }} Example Heading</h5>
<h6>{{ html.icon('info-sign') }} Example Heading</h6>

See the Pen docs - icons - icon headers by Pulsar (@pulsar) on CodePen.

{# Icon before the text #}
{{ html.button(html.icon('plus') ~ 'Button', 'btn--primary') }}

See the Pen GqBLwQ by Pulsar (@pulsar) on CodePen.

{# Icon after the text #}
{{ html.link('Link' ~ html.icon('ok'), '#example') }}

See the Pen docs - icons - icon link by Pulsar (@pulsar) on CodePen.

Styleguide

When using iconography you may need to use different icons to illustrate a state and the associated action which modifies the state.

See the Pen docs - icons - icon states by Pulsar (@pulsar) on CodePen.