What is Socicon ?
Socicon is an easy way to customize the look and feel of social icons for web projects. If you just need images of icons, try or social icons generator.
DownloadHow to use
To use Socicon on your website.
Firstly, you have to declare the font in your CSS stylesheet:
@font-face { font-family: 'socicon'; src: url('font/socicon-webfont.eot'); src: url('font/socicon-webfont.eot?#iefix') format('embedded-opentype'), url('font/socicon-webfont.woff') format('woff'), url('font/socicon-webfont.ttf') format('truetype'), url('font/socicon-webfont.svg#sociconregular') format('svg'); font-weight: normal; font-style: normal; }
Secondly, you have to create a new CSS class that uses Socicon icons font. Here, a small example:
.socicon { font-family: 'socicon' !important; }
Now, in your HTML code, each networks have its corresponding character, just wrap the right character with your CSS class and that's it:
<a href="http://twitter.com/_netcodes"><span class="socicon">a</span> @_netcodes</a>
Use with CSS class selector
.socicon { position: relative; top: 1px; display: inline-block; font-family: 'socicon'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; } .socicon:empty{ width: 1em; } .socicon-easid:before { content: "5"; } .socicon-twitter:before { content: "a"; } .socicon-facebook:before { content: "b"; } .socicon-google:before { content: "c"; } .socicon-pinterest:before { content: "d"; } .socicon-foursquare:before { content: "e"; } .socicon-yahoo:before { content: "f"; } .socicon-skype:before { content: "g"; } .socicon-yelp:before { content: "h"; } .socicon-feedburner:before { content: "i"; } .socicon-linkedin:before { content: "j"; } .socicon-viadeo:before { content: "k"; } .socicon-xing:before { content: "l"; } .socicon-myspace:before { content: "m"; } .socicon-soundcloud:before { content: "n"; } .socicon-spotify:before { content: "o"; } .socicon-grooveshark:before { content: "p"; } .socicon-lastfm:before { content: "q"; } .socicon-youtube:before { content: "r"; } .socicon-vimeo:before { content: "s"; } .socicon-dailymotion:before { content: "t"; } .socicon-vine:before { content: "u"; } .socicon-flickr:before { content: "v"; } .socicon-500px:before { content: "w"; } .socicon-instagram:before { content: "x"; } .socicon-wordpress:before { content: "y"; } .socicon-tumblr:before { content: "z"; } .socicon-blogger:before { content: "A"; } .socicon-technorati:before { content: "B"; } .socicon-reddit:before { content: "C"; } .socicon-dribbble:before { content: "D"; } .socicon-stumbleupon:before { content: "E"; } .socicon-digg:before { content: "F"; } .socicon-envato:before { content: "G"; } .socicon-behance:before { content: "H"; } .socicon-delicious:before { content: "I"; } .socicon-deviantart:before { content: "J"; } .socicon-forrst:before { content: "K"; } .socicon-play:before { content: "L"; } .socicon-zerply:before { content: "M"; } .socicon-wikipedia:before { content: "N"; } .socicon-apple:before { content: "O"; } .socicon-flattr:before { content: "P"; } .socicon-github:before { content: "Q"; } .socicon-chimein:before { content: "R"; } .socicon-friendfeed:before { content: "S"; } .socicon-newsvine:before { content: "T"; } .socicon-identica:before { content: "U"; } .socicon-bebo:before { content: "V"; } .socicon-zynga:before { content: "W"; } .socicon-steam:before { content: "X"; } .socicon-xbox:before { content: "Y"; } .socicon-windows:before { content: "Z"; } .socicon-outlook:before { content: "1"; } .socicon-coderwall:before { content: "2"; } .socicon-tripadvisor:before { content: "3"; } .socicon-netcodes:before { content: "4"; } .socicon-lanyrd:before { content: "7"; } .socicon-slideshare:before { content: "8"; } .socicon-buffer:before { content: "9"; } .socicon-rss:before { content: ","; } .socicon-vkontakte:before { content: ";"; } .socicon-disqus:before { content: ":"; }
License
Socicon is released under SIL Open Font License 1.1 (http://scripts.sil.org/OFL).
You are free to use it on your website or project.
If you use Socicon for any project, please make a backlink to http://socicon.com. It will give us a hand and be highly appreciated.
You can also make a tweet, facebook message, donation... Visit Netcodes website and check out our products and tools.
Socicon glyphs
Socicon includes all the glyphs listed below.
Visit Socicon.com for more details.
[koken_upload filename="social-network.jpg" label="social-network.jpg"]