a social icons font

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.

Socicon glyphs

Socicon includes all the glyphs listed below.

Twitteraa
Facebookbb
Google+cc
Pinterestdd
foursquareee
Yahoo!ff
skypegg
yelphh
FeedBurnerii
Linkedinjj
Viadeokk
Xingll
Myspacemm
soundcloudnn
Spotifyoo
groovesharkpp
last.fmqq
YouTuberr
vimeoss
Dailymotiontt
Vineuu
flickrvv
500pxww
Instagramxx
WordPressyy
tumblrzz
BloggerAA
TechnoratiBB
redditCC
dribbbleDD
StumbleUponEE
DiggFF
EnvatoGG
BehanceHH
DeliciousII
deviantARTJJ
ForrstKK
Play StoreLL
ZerplyMM
WikipediaNN
AppleOO
FlattrPP
GitHubQQ
Chime.inRR
FriendFeedSS
NewsVineTT
IdenticaUU
beboVV
zyngaWW
steamXX
XBOXYY
WindowsZZ
Outlook11
coderwall22
tripadvisor33
netcodes44
easID55
66
Lanyrd77
SlideShare88
Buffer99
RSS,,
VKontakte;;
DISQUS::
All brand icons are trademarks of their respective owners.
The use of these trademarks does not indicate endorsement of the trademark holder by Socicon / Netcodes, nor vice versa.

How 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

create CSS Styles

.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: ":"; }

For example, it's easy to create a nice button (here with Pure CSS) :

reserve your card on easID follow easID

To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

<span class="socicon socicon-twitter"></span>
<!-- pure button example -->
<a href="http://twitter.com/_netcodes" class="pure-button"><span class="socicon socicon-twitter"></span> @_netcodes</a>

Customize

As it's CSS, you can easily style icon color, background, size, shadow, ...

We also provide a JSON file containing the configuration of the social icons: id, name, character and primary color. Thus, you can easily generate the CSS code you need.

An example script using nodejs :

#!/usr/bin/env node

var icons = require('./icons.json');

for (var i = 0; i < icons.length; i++) {
    var icon = icons[i];
    console.log("." + icon.id + " { color: " + icon.color + "; }");
};

Use this command to generate code :

./generate.js >custom.css

You prefer images ?

We have built a simple generator for you. Create customized social icons in a sec.

Generate your icons

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.

The little story behind the name :)

We are a web studio based in France and it is nice sometimes to show that your work is made in your country. In France we are very proud of our food (sometimes a bit too much). Socicon refers to the saucisson a sort of dry saussage that we eat as an aperitif with a drink, with cheese, in a packed lunch, well we can really eat saucisson any time, anywhere and with anyone!