Icons

Icons are embedded in a custom “eiti.eot” webfont, and render at 1 rem by default. Down the road, it may better to convert all of the site icons to svg files, for improved performance and flexibility. This github issue tracks progress toward that goal.

<!-- Default -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon "></div>
        <div class="label-primary"></div>
    </div>
</div>

<!-- Coal -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-coal"></div>
        <div class="label-primary">.icon-coal</div>
    </div>
</div>

<!-- Copper -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-copper"></div>
        <div class="label-primary">.icon-copper</div>
    </div>
</div>

<!-- Hardrock -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-hardrock"></div>
        <div class="label-primary">.icon-hardrock</div>
    </div>
</div>

<!-- Iron -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-iron"></div>
        <div class="label-primary">.icon-iron</div>
    </div>
</div>

<!-- Gas -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-gas"></div>
        <div class="label-primary">.icon-gas</div>
    </div>
</div>

<!-- Geo -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-geo"></div>
        <div class="label-primary">.icon-geo</div>
    </div>
</div>

<!-- Gold -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-gold"></div>
        <div class="label-primary">.icon-gold</div>
    </div>
</div>

<!-- Oil -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-oil"></div>
        <div class="label-primary">.icon-oil</div>
    </div>
</div>

<!-- Wind -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-wind"></div>
        <div class="label-primary">.icon-wind</div>
    </div>
</div>

<!-- Chevron Sm -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-sm"></div>
        <div class="label-primary">.icon-chevron-sm</div>
    </div>
</div>

<!-- Chevron Sm Left -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-sm-left"></div>
        <div class="label-primary">.icon-chevron-sm-left</div>
    </div>
</div>

<!-- Chevron Sm Down -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-sm-down"></div>
        <div class="label-primary">.icon-chevron-sm-down</div>
    </div>
</div>

<!-- Chevron Sm Up -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-sm-up"></div>
        <div class="label-primary">.icon-chevron-sm-up</div>
    </div>
</div>

<!-- Chevron Lg -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-lg"></div>
        <div class="label-primary">.icon-chevron-lg</div>
    </div>
</div>

<!-- Chevron Lg Left -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-lg-left"></div>
        <div class="label-primary">.icon-chevron-lg-left</div>
    </div>
</div>

<!-- Chevron Lg Up -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-lg-up"></div>
        <div class="label-primary">.icon-chevron-lg-up</div>
    </div>
</div>

<!-- Chevron Lg Down -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-lg-down"></div>
        <div class="label-primary">.icon-chevron-lg-down</div>
    </div>
</div>

<!-- Plus Sm -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-plus-sm"></div>
        <div class="label-primary">.icon-plus-sm</div>
    </div>
</div>

<!-- Plus Lg -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-plus-lg"></div>
        <div class="label-primary">.icon-plus-lg</div>
    </div>
</div>

<!-- Dash Sm -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-dash-sm"></div>
        <div class="label-primary">.icon-dash-sm</div>
    </div>
</div>

<!-- Dash Lg -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-dash-lg"></div>
        <div class="label-primary">.icon-dash-lg</div>
    </div>
</div>

<!-- Close -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-close-x"></div>
        <div class="label-primary">.icon-close-x</div>
    </div>
</div>

<!-- Book -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-book"></div>
        <div class="label-primary">.icon-book</div>
    </div>
</div>

<!-- Map -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-map"></div>
        <div class="label-primary">.icon-map</div>
    </div>
</div>

<!-- Cloud -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-cloud"></div>
        <div class="label-primary">.icon-cloud</div>
    </div>
</div>

<!-- Search -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-search"></div>
        <div class="label-primary">.icon-search</div>
    </div>
</div>

<!-- Bars -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-bars"></div>
        <div class="label-primary">.icon-bars</div>
    </div>
</div>

<div>
  <div class="wrapper-padded-float">
    <div class="icon {{ className }}"></div>
    <div class="label-primary">{{ text }}</div>
  </div>
</div>
/* Default: No context defined */

/* Coal */
{
  "className": "icon-coal",
  "text": ".icon-coal"
}

/* Copper */
{
  "className": "icon-copper",
  "text": ".icon-copper"
}

/* Hardrock */
{
  "className": "icon-hardrock",
  "text": ".icon-hardrock"
}

/* Iron */
{
  "className": "icon-iron",
  "text": ".icon-iron"
}

/* Gas */
{
  "className": "icon-gas",
  "text": ".icon-gas"
}

/* Geo */
{
  "className": "icon-geo",
  "text": ".icon-geo"
}

/* Gold */
{
  "className": "icon-gold",
  "text": ".icon-gold"
}

/* Oil */
{
  "className": "icon-oil",
  "text": ".icon-oil"
}

/* Wind */
{
  "className": "icon-wind",
  "text": ".icon-wind"
}

/* Chevron Sm */
{
  "className": "icon-chevron-sm",
  "text": ".icon-chevron-sm"
}

/* Chevron Sm Left */
{
  "className": "icon-chevron-sm-left",
  "text": ".icon-chevron-sm-left"
}

/* Chevron Sm Down */
{
  "className": "icon-chevron-sm-down",
  "text": ".icon-chevron-sm-down"
}

/* Chevron Sm Up */
{
  "className": "icon-chevron-sm-up",
  "text": ".icon-chevron-sm-up"
}

/* Chevron Lg */
{
  "className": "icon-chevron-lg",
  "text": ".icon-chevron-lg"
}

/* Chevron Lg Left */
{
  "className": "icon-chevron-lg-left",
  "text": ".icon-chevron-lg-left"
}

/* Chevron Lg Up */
{
  "className": "icon-chevron-lg-up",
  "text": ".icon-chevron-lg-up"
}

/* Chevron Lg Down */
{
  "className": "icon-chevron-lg-down",
  "text": ".icon-chevron-lg-down"
}

/* Plus Sm */
{
  "className": "icon-plus-sm",
  "text": ".icon-plus-sm"
}

/* Plus Lg */
{
  "className": "icon-plus-lg",
  "text": ".icon-plus-lg"
}

/* Dash Sm */
{
  "className": "icon-dash-sm",
  "text": ".icon-dash-sm"
}

/* Dash Lg */
{
  "className": "icon-dash-lg",
  "text": ".icon-dash-lg"
}

/* Close */
{
  "className": "icon-close-x",
  "text": ".icon-close-x"
}

/* Book */
{
  "className": "icon-book",
  "text": ".icon-book"
}

/* Map */
{
  "className": "icon-map",
  "text": ".icon-map"
}

/* Cloud */
{
  "className": "icon-cloud",
  "text": ".icon-cloud"
}

/* Search */
{
  "className": "icon-search",
  "text": ".icon-search"
}

/* Bars */
{
  "className": "icon-bars",
  "text": ".icon-bars"
}