soc.js

An easier way to create social icons.

Features

Installation

Install with Bower

bower install socjs

Or Download Files

Download

Usage

Place below within the <head></head> of your website.

<link rel="stylesheet" type="text/css" href="PATH/TO/soc.min.css">

Place below where you'd like the icons to show.

<div class="soc">
    <a href="" class="soc-facebook" title="Facebook"></a>
    <a href="" class="soc-twitter" title="Twitter"></a>
    <a href="" class="soc-instagram" title="Instagram"></a>
    <a href="" class="soc-pinterest" title="Pinterest"></a>
    <a href="" class="soc-youtube" title="YouTube"></a>
    <a href="" class="soc-rss" title="Rss"></a>
</div>
<script type="text/javascript" src="PATH/TO/soc.min.js"></script>

Change the color of the icons.

<div class="soc" data-size="80px" data-buttoncolor="#999" data-iconcolor="#000">
    ...
</div>

Size and space the icons.

<div class="soc" data-size="40px" data-spacing="20px">
    ...
</div>

Circular icons.

<div class="soc" data-size="50px" data-radius="circle">
    ...
</div>

Square icons.

<div class="soc" data-size="50px" data-radius="0">
    ...
</div>

Combine with AddThis for share functionality.

<div class="soc addthis_toolbox" data-size="80px" data-buttoncolor="#ff5c3d">
    <a class="soc-facebook addthis_button_facebook" title="Facebook"></a>
    <a class="soc-twitter addthis_button_twitter" title="Twitter"></a>
    <a class="soc-google addthis_button_google_plusone_share" title="Google Plus"></a>
    <a class="soc-pinterest addthis_button_pinterest_share" title="Pinterest"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
            

Why is there a Javascript dependency?

You're right, it is not needed. You could make a few simple adjustments to the sass and be off and running, but we have bigger plans for this which requires a more dynamic nature. The below video has a little sneek peek.

Available Icons

Thanks To

Special thanks to Socicon for the icon font.

Soc.js is brought to you by Ivan Sugerman and Next Wave

Donate

Help fund the continued development of Soc.js. All proceeds will go towards further improvement of Soc.js. There might even be a hosted version in the works if we can raise enough to cover the CDN costs.

Click here to lend your support to: Soc.js - An easier way to create social icons.  and make a donation at pledgie.com !

License

Soc.js is licensed under The MIT License (MIT).

Fork me on GitHub