Using Fonts.

by andyjmeyers

HTML

<div class='batch'>
    &#xf000; &#xf001; &#xf002; &#xf003; &#xf004;
</div>

<div class='batch blue'>
    &#xf000; &#xf001; &#xf002; &#xf003; &#xf004;
</div>

<div class='batch backgrounded'>
    &#xf000; &#xf001; &#xf002; &#xf003; &#xf004;
</div>

<button class='before'></button>

<button class='data' data-icon='&#xf000;'></button>

CSS

@font-face{
    font-family:Batch;
    src:url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.eot');
    src:url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.woff') format('woff'),
        url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.ttf') format('truetype'),
        url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.svg#batchregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

.batch {
    font-family:"Batch"; /*or whatever you've decalred your font name as*/
    font-size:16px;
    line-height:1;
    
}

.blue{
    color:blue;
}

.backgrounded{
    color:red;
    background-color:black;
}

.before::before{
    font-family:"Batch";
    content: "\f000";
}

.data::before{
    font-family:"Batch";
    content: attr(data-icon);
}