How to use Sprites

This is how you do it <i class="icon-insert_name"></i> :

<i class="icon-glass"></i>
<i class="icon-music"></i>
<i class="icon-search"></i>
<i class="icon-envelope"></i>
<i class="icon-heart"></i>
<i class="icon-star"></i>
<i class="icon-star-empty"></i>
<i class="icon-user"></i>
<i class="icon-film"></i>
<i class="icon-th-large"></i>
<i class="icon-th"></i>
<i class="icon-th-list"></i>
<i class="icon-ok"></i>
<i class="icon-remove"></i>
<i class="icon-zoom-in"></i>
<i class="icon-zoom-out"></i>
<i class="icon-off"></i>
<i class="icon-signal"></i>
<i class="icon-cog"></i>
<i class="icon-trash"></i>
<i class="icon-home"></i>
<i class="icon-file"></i>
<i class="icon-time"></i>
<i class="icon-road"></i>
<i class="icon-download-alt"></i>
<i class="icon-download"></i>
<i class="icon-upload"></i>
<i class="icon-inbox"></i>
<i class="icon-play-circle"></i>
<i class="icon-repeat"></i>

<i class="icon-refresh"></i>
<i class="icon-list-alt"></i>
<i class="icon-lock"></i>
<i class="icon-flag"></i>
<i class="icon-headphones"></i>
<i class="icon-volume-off"></i>
<i class="icon-volume-down"></i>
<i class="icon-volume-up"></i>
<i class="icon-qrcode"></i>
<i class="icon-barcode"></i>
<i class="icon-tag"></i>
<i class="icon-tags"></i>
<i class="icon-book"></i>
<i class="icon-bookmark"></i>
<i class="icon-print"></i>
<i class="icon-camera"></i>
<i class="icon-font"></i>
<i class="icon-bold"></i>
<i class="icon-italic"></i>
<i class="icon-text-height"></i>
<i class="icon-text-width"></i>
<i class="icon-align-left"></i>
<i class="icon-align-center"></i>
<i class="icon-align-right"></i>
<i class="icon-align-justify"></i>
<i class="icon-list"></i>
<i class="icon-indent-left"></i>
<i class="icon-indent-right"></i>
<i class="icon-facetime-video"></i>
<i class="icon-picture"></i>

<i class="icon-pencil"></i>
<i class="icon--map-marker"></i>
<i class="icon-adjust"></i>
<i class="icon-tint"></i>
<i class="icon-edit"></i>
<i class="icon-share"></i>
<i class="icon-check"></i>
<i class="icon-move"></i>
<i class="icon-step-backward"></i>
<i class="icon-fast-backward"></i>
<i class="icon-backward"></i>
<i class="icon-play"></i>
<i class="icon-pause"></i>
<i class="icon-stop"></i>
<i class="icon-forward"></i>
<i class="icon-fast-forward"></i>
<i class="icon-step-forward"></i>
<i class="icon-eject"></i>
<i class="icon-chevron-left"></i>
<i class="icon-chevron-right"></i>
<i class="icon-plus-sign"></i>
<i class="icon-minus-sign"></i>
<i class="icon-remove-sign"></i>
<i class="icon-ok-sign"></i>
<i class="icon-question-sign"></i>
<i class="icon-info-sign"></i>
<i class="icon-screenshot"></i>
<i class="icon-remove-circle"></i>
<i class="icon-ok-circle"></i>
<i class="icon-ban-circle"></i>

<i class="icon-arrow-left"></i>
<i class="icon-arrow-right"></i>
<i class="icon-arrow-up"></i>
<i class="icon-arrow-down"></i>
<i class="icon-share-alt"></i>
<i class="icon-resize-full"></i>
<i class="icon-resize-small"></i>
<i class="icon-plus"></i>
<i class="icon-minus"></i>
<i class="icon-asterisk"></i>
<i class="icon-exclamation-sign"></i>
<i class="icon-gift"></i>
<i class="icon-leaf"></i>
<i class="icon-fire"></i>
<i class="icon-eye-open"></i>
<i class="icon-eye-close"></i>
<i class="icon-warning-sign"></i>
<i class="icon-plane"></i>
<i class="icon-calendar"></i>
<i class="icon-random"></i>
<i class="icon-comment"></i>
<i class="icon-magnet"></i>
<i class="icon-chevron-up"></i>
<i class="icon-chevron-down"></i>
<i class="icon-retweet"></i>
<i class="icon-shopping-cart"></i>
<i class="icon-folder-close"></i>
<i class="icon-folder-open"></i>
<i class="icon-resize-vertical"></i>
<i class="icon-resize-horizontal"></i>

How to use Buttons

Use them like these:

Defaults
class="btn"
class="btn-primary"
class="btn-warning"
class="btn-danger"
class="btn-success"
class="btn-info"

Disabled
<button class="btn" disabled>
class="btn-primary"
class="btn-warning"
class="btn-danger"
class="btn-success"
class="btn-info"

With Icons
Refresh
<a class="btn" href="#"><i class="icon-refresh"></i> Refresh</a>
User
<a class="btn btn-primary" href="#"><i class="icon-chevron-down"></i> User

How to use Social Media CSS3 Buttons

The default in the source is <link href="src/styles/icons/social-media/social-media-light.css" rel="stylesheet" />. The other CSS file is social-media-dark.css.

Here's how to use them:
<a href="#" class="sm-social_media_name" title="social media name"></a>

sm-facebook
sm-twitter
sm-google
sm-myspace
sm-linkedin
sm-feed

sm-lastfm
sm-vimeo
sm-youtube
sm-dribbble
sm-forrst
sm-gowalla

sm-skype
sm-tumblr
sm-wordpress
sm-blogger
sm-digg
sm-stumbleupon

sm-pinterest
sm-flickr
additional:
<span class="cyan"></span>
<span class="magenta"></span>
after the <a> tag
sm-yahoo
sm-deviantart
sm-behance
sm-sharethis