This is a collection of SASS styles to pimp out your social icons. The correct colours are included with each social icon (list available in "core/social-networks.scss").
The styles also offer a variety of ways to display the icons. See the examples below for these classes.
##Usage
Include the social-sass.scss in your project and use the add-on Font Awesome classes as in the examples below.
@import "SocialSASS/social-sass"
Font Awesome SASS files are also included, but you can delete them if you've already included them in your project. Don't forget to remove the reference in social-sass.scss too!
View the social-networks.scss file for list fo social networks supported.
##Icon Examples
See our example page or the examples/index.html for working samples.
Default Icon - <i class="fa default fa-twitter"></i>
Default Icon (background applied on hover) - <i class="fa default-hover fa-linkedin"></i>
Default Icon (spins on hover) - <i class="fa default-spin fa-instagram"></i>
Default Icon (background applied and spins on hover) - <i class="fa default-spin-hover fa-pinterest"></i>
Bordered Icon (Solid border) - <i class="fa bordered solid fa-digg"></i>
Bordered Icon (Dotted border) - <i class="fa bordered dotted fa-flickr"></i>
Bordered Icon (Dashed border) - <i class="fa bordered dashed fa-foursquare"></i>
Bordered Icon (Double border) - <i class="fa bordered double fa-whatsapp"></i>
Rounded Icon - <i class="fa rounded fa-facebook"></i>
Rounded Icon (background applied on hover) - <i class="fa rounded-hover fa-vimeo-square"></i>
Rounded Icon (spins on hover) - <i class="fa rounded-spin fa-youtube"></i>
Rounded Icon (background applied and spins on hover) - <i class="fa rounded-hover-spin fa-wordpress"></i>
Squared Icon - <i class="fa squared fa-dribbble"></i>
Squared Icon (background applied on hover) - <i class="fa squared-hover fa-soundcloud"></i>
Squared Icon (shifts down on hover) - <i class="fa squared-shift fa-flickr"></i>
Squared Icon (background applied and shifts down on hover) - <i class="fa squared-shift-hover fa-yahoo"></i>
##Details
Most of the social networks' colours were from the Design Pieces article. Thanks for saving a load of searching!
Some of the mixins came from Web Design Weekly.