13 #Sprites Sprites
sprite-*
Be sure to put a brief descriptive text inside sprite and logo elements, for accessibility on screen readers. A title attribute may also be added to provide tooltip text on mouse hover: <i class="sprite-close" title="close">close</i>.
sprite-search
sprite-print
sprite-email
sprite-download
sprite-file-pdf
sprite-file-doc
sprite-file-excel
sprite-plus
sprite-minus
sprite-plus-faded
sprite-minus-faded
sprite-menu
is-open class)
sprite-close
inverse class for white version)
sprite-close-main
sprite-play-sm
sprite-play
sprite-play-lg
sprite-play-xl
sprite-featured
sprite-edit
sprite-draggable
sprite-gear
<i class="[modifier class]"></i>13.1 #Sprites.Asset-Classes Asset Classes
These sprites come in four variations each: regular, small, inverse, and inverse small.
sprite-emissions
sprite-agriculture
sprite-metals
sprite-equities
sprite-bonds
sprite-energy
sprite-fx
sprite-credit
sprite-int-rates
sprite-etp
<i class="[modifier class]"></i><div style="background-color: #999">
<i class="sprite-emissions"></i>
<i class="sprite-emissions-sm"></i>
<i class="sprite-emissions inverse"></i>
<i class="sprite-emissions-sm inverse"></i>
</div>13.2 #Sprites.Business Business Sprites
sprite-calendar
sprite-clock
sprite-locked
sprite-unlocked
sprite-pin
sprite-document
sprite-computer
sprite-person
sprite-speech
sprite-check
sprite-chart
sprite-mobile
<i class="[modifier class]"></i><div style="background-color: #999">
<i class="sprite-calendar"></i>
<i class="sprite-calendar-sm"></i>
<i class="sprite-calendar inverse"></i>
<i class="sprite-calendar-sm inverse"></i>
</div>13.3 #Sprites.Chevrons Arrows
chevron-*
“Chevron” arrows, available in three sizes for each direction.
chevron-n
chevron-s
chevron-e
chevron-w
<i class=[modifier class]></i><i class="chevron-n chevron-sm"></i>
<i class="chevron-n"></i>
<i class="chevron-n chevron-lg"></i>
<i class="chevron-s chevron-sm"></i>
<i class="chevron-s"></i>
<i class="chevron-s chevron-lg"></i>
<i class="chevron-e chevron-sm"></i>
<i class="chevron-e"></i>
<i class="chevron-e chevron-lg"></i>
<i class="chevron-w chevron-sm"></i>
<i class="chevron-w"></i>
<i class="chevron-w chevron-lg"></i>13.3.1 #Sprites.Chevrons.Colors Alternate colors
chevron-primary, chevron-inverse, chevron-disabled
chevron-primary
chevron-inverse
chevron-disabled
<i class="chevron-e [modifier class]"></i>13.4 #Sprites.Loader Loading Spinner
has-loader, is-loading
Apply the class has-loader to any container that needs a preloader. Add the class is-loading while it is in a loading state to overlay the spinner. This will mask the contents of the container until loading is complete. This is useful for hiding partially-rendered content until it fully loaded and ready to display.
<div class="has-loader is-loading">
Loading...
</div>13.5 #Sprites.Logos Logos
logo-*
Logos for ICE and NYSE. logo-main, logo-main-sm, logo-white, and logo-inverse use the logo of the current company, depending on whether you are using the ICE or NYSE stylesheets. The other logos are the same on both stylesheets.
logo-intercontinental-exchange
logo-ice
logo-ice-sm
logo-ice-white
logo-ice-inverse
logo-nyse
logo-nyse-sm
logo-nyse-white
logo-nyse-inverse
logo-ice-listed
logo-main
logo-main-sm
logo-white
logo-inverse
<i class="[modifier class]"></i>13.7 #Sprites.Alignment Alignment
sprite-middle, sprite-bottom
The default vertical alignment of sprites is on the baseline of the text. Adjust this using these classes.
sprite-middle
sprite-bottom
sprite-baseline
sprite-textbottom
<p><i class="sprite-print [modifier class]"></i> Print</p>