Icon text

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<p>
    <a href=# class=icon-text>
        <i class="icon-text__icon  s  s--red-square"></i>Foo bar
    </a>
</p>

<p>
    <a href=# class=icon-text--rev>
        Foo bar<i class="icon-text__icon  s  s--red-square"></i>
    </a>
</p>

CSS

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

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

.s{
    background-image:url('http://csswizardry.com/img/css/sprites/main.png');
}

/* Sprite images */
.s--red-square   { background-position:  0     0  ; }