Icons

Standard

We use FontAwesome v4.7 (link) as the basis for our icon library. Reference their cheatsheet for icon options.

= ui.nfg :icon, 'rocket'
<i aria-hidden="true" class="fa fa-rocket"></i>
Themes

There are multiple options for adding colors to icons. Add a trait to apply the color.

= ui.nfg :icon, 'check', :success
= ui.nfg :icon, 'trash-o', :danger
= ui.nfg :icon, 'calendar-o', :muted
<i aria-hidden="true" class="fa fa-check text-success"></i><i aria-hidden="true" class="fa fa-trash-o text-danger"></i><i aria-hidden="true" class="fa fa-calendar-o text-muted"></i>
Text

Add text to the right or left of the icon. Add a :right trait to make the icon appear to the right.

Text to the right of the icon.
Text to the left of the icon. 
= ui.nfg :icon, 'caret-left', text: 'Text to the right of the icon.'
= ui.nfg :icon, 'caret-right', :right, text: 'Text to the left of the icon.'
<i aria-hidden="true" class="fa fa-caret-left mr-1"></i> Text to the right of the icon.Text to the left of the icon. <i aria-hidden="true" class="fa fa-caret-right ml-1"></i>
Custom Traits

We have a few options for icons using traits to increase consistency across loading and tip icons. The loading icon adds the "fa-spin" class to make the icon animate. The tip icon adds the "text-info" class to give it the correct color. Use the tip icon when showcasing helpful information for the customer like a link to a knowledge base article or in app help text. Use the loader icon when needing an interstitial loading phase of content.

= ui.nfg :icon, :loader
= ui.nfg :icon, :tip
<i aria-hidden="true" class="fa fa-spinner fa-spin fa-fw"></i><i aria-hidden="true" class="fa fa-question-circle-o text-info"></i>
Miscellaneous

Icons can also have tooltips.

= ui.nfg :icon, 'hand-pointer-o', tooltip: "Hi there! I'm a tooltip."
<i data-toggle="tooltip" data-placement="top" data-html="true" aria-hidden="true" title="Hi there! I&#39;m a tooltip." class="fa fa-hand-pointer-o"></i>
Traits

The icon component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the icon.

id: 'my_id'
= ui.nfg :icon, id: 'my_id'
class:

Adds a class to the icon.

class: 'my-class'
= ui.nfg :icon, class: 'my-class'
describe:

For addding a data-describe to any icon.

describe: 'test-data-describe'
= ui.nfg :icon, describe: 'test-data-describe'
text:

For addding text to right of any icon.

text: 'This is my text'
= ui.nfg :icon, text: 'This is my text'
right:

For addding text to left of any icon.

right: true
= ui.nfg :icon, :right
theme:

Determines the theme of the icon.

:primary
:secondary
:success
:warning
:danger
:info
:light
:dark
:muted
= ui.nfg :icon, :success
tooltip:

Shows a tooltip on icon.

tooltip: 'This is my tooltip!'
= ui.nfg :icon, tooltip: 'Hi there!'
:tip

Shows the tip icon.

:tip
= ui.nfg :icon, :tip
:loader

Shows the loading icon.

:loader
= ui.nfg :icon, :loader
render_if:

Condition to determine if the icon shows or not.

render_if: (1==1)
= ui.nfg :icon, text: 'Rendered', render_if: (1==1)
render_unless:

Condition to determine if the icon shows or not.

render_unless: (1==1)
= ui.nfg :icon, text: 'Not Rendered', render_unless: (1==1)