Tim Butterfield
Social Icons webfont - Socicon

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.

Download

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

.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.

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.

Visit Socicon.com for more details.

[koken_upload filename="social-network.jpg" label="social-network.jpg"]