Socialsprite: A CSS Sprite Blueprint Plugin

Wednesday, September 12, 2012 by Matt Woodward

What Is It?

Socialsprite is a Blueprint CSS plugin providing Elegant Theme’s Social Media Icon Package in CSS Sprite form to improve ease of use.

Usage

  1. Download & unzip the plugin directory
  2. Place this directory inside blueprint/plugins
  3. Add this line to “blueprint/screen.css”:
    /* Import the 24x24 icons into your CSS or...*/
    @import 'plugins/socialsprite/sprite.css';
     
    /* ...import the 32x32 icons into your CSS */
    @import 'plugins/socialsprite/sprite32.css';
  4. Use the sprites by attaching classes sn_sprite & sn_(name of sprite) to an a, span or div element. You can use test.html (or test32.html) as a key to the names of sprites.

    Example

    <span class="sn_sprite sn_facebook">&nbsp;
    </span>

Credit

License

Usage released under a creative commons Attribution 3.0 license http://creativecommons.org/licenses/by/3.0/au/

The Sprites

  sn_facebook
  sn_rss
  sn_twitter
  sn_dribbble
  sn_pinterest
  sn_instagram
  sn_tumblr
  sn_evernote
  sn_linkedin
  sn_vimeo
  sn_digg
  sn_deviantart
  sn_bebo
  sn_flickr
  sn_posterous
  sn_blogger
  sn_wordpress
  sn_delicious
  sn_soundcloud
  sn_yahoo
  sn_email
  sn_stumbleupon
  sn_youtube
  sn_myspace
  sn_lastfm
  sn_designfloat
  sn_orkut
  sn_behance
  sn_netvibes
  sn_reddit
  sn_forrst
  sn_grooveshark
  sn_path
  sn_google
  sn_picasa

Download

A zip of the plugin can be downloaded below:
socialsprite.zip (122K)


Enjoyed our site? Then why not follow us on Twitter @FairGoSolutions and subscribe to our RSS Feed.