Sprite

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<ul>
    <li><a href=#><i class="sprite  sprite--red-square"></i> Foo bar</a></li>
    <li><a href=#><i class="sprite  sprite--blue-circle"></i> Foo bar</a></li>
    <li><a href=#><i class="i  i--$"></i> Deposit funds</a></li>
    <li><a href=#><i class="i  i--star"></i> View your favourites</a></li>
    <li><a href=# class="sprite  sprite--orange-sqaure">Foo bar</a> or <a href=# class="sprite  sprite--green-circle">Bar baz</a></li>
</ul>

CSS

/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/objects/_sprite.scss
 */

html{
    font:1em/1.5 Georgia, serif;
    padding:5%;
    background-color:#fff;
    color:#333;
}

.sprite{
    background-image:url(https://www.flightradar24.com/static/images/sprites/yellow_small.png?b);
}

/* Sprite images */
.sprite--red-square   { background-position:  0     48px  ; }
.sprite--blue-circle  { background-position:     0   0  ; }
.sprite--orange-sqaure{ background-position:  -16px -16px; }
.sprite--green-circle { background-position:  0   -16px; }

/* Font icons */
.i--star:after   { content:"★"; color:#a70; }
.i--\$:after     { content:"$"; color:#281; }