Sprite

by Annett

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<ul>
    <li><a href=#><i class="s  s--red-square"></i> Foo bar</a></li>
    <li><a href=#><i class="s  s--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="s  s--orange-sqaure">Foo bar</a> or <a href=# class="s  s--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;
}

.s{
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARlJREFUeNrMlTEOgjAYhVvD6O7qyhU4AFyC3YXN2ckTmLiwcwk4AFdgZXV3x9ekAxoV2/cSfOEtTR/9lOZ/djIGT7xsPdmXpRwu4AxO/doA93ALd095IcAeruADvP2w/Q7X8BUe3UJiNHKHn+FyYZ8DO8I7+OQgNiKA6ofD5yp9xigAcv+3h8plcgVA8eWbL32OQgGQMVkFQMpkVZcwWgqAgckqAHomqwBo/YQLlcu0CoDOj9dQuUynuoRutjcB+xufkXXB6Gf7LbSM7Op1/Ob4oBdMF/IHzOJRfc4CJGyfqyZhdJ8rAKg+VwBQfa4AoPpcAUD1+T/UMQ1A9bkCgOpzBQDV5woAqs9VlzC6z1klbJ+zWr2OHwIMAKtEXw3hKHeyAAAAAElFTkSuQmCC);
}

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

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