How to use

Socicon on your website

The easiest way to use Socicon on your website

  1. Grab the Socicon Cloud service you prefer and add it to your <head> from the download page
  2. Then, add the Socicon CSS class to any HTML tag + your styles.
    For example : class="socicon-imdb", for the icon.

How to use Socicon on your desktop computer

  1. Download Socicon Desk
  2. Install socicon.ttf on your computer
  3. In your software (Illustrator, Photoshop...), copy & paste socicon glyphs

Use Socicon with @font-face, local font

After downloading the font, you can declare the font in your CSS stylesheet. Use your path to the font, the one here is for example purpose.

@font-face {
  font-family: 'Socicon';
  src: url('fonts/Socicon.eot');
  src: url('fonts/Socicon.eot#iefix') format('embedded-opentype'), url('fonts/Socicon.woff2') format('woff2'), url('fonts/Socicon.ttf') format('truetype'), url('fonts/Socicon.woff') format('woff'), url('fonts/Socicon.svg#Socicon') format('svg');
  font-weight: normal;
  font-style: normal;
}

Then, you have to create a new CSS class that uses Socicon icons font. Here, a small example:

[class^="socicon-"],
[class*=" socicon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Socicon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

CSS class selectors


.socicon-500px:before {
  content: "\e000";
}
.socicon-8tracks:before {
  content: "\e001";
}
.socicon-airbnb:before {
  content: "\e002";
}
.socicon-alliance:before {
  content: "\e003";
}
.socicon-amazon:before {
  content: "\e004";
}
.socicon-amplement:before {
  content: "\e005";
}
.socicon-android:before {
  content: "\e006";
}
.socicon-angellist:before {
  content: "\e007";
}
.socicon-apple:before {
  content: "\e008";
}
.socicon-appnet:before {
  content: "\e009";
}
.socicon-baidu:before {
  content: "\e00a";
}
.socicon-bandcamp:before {
  content: "\e00b";
}
.socicon-battlenet:before {
  content: "\e00c";
}
.socicon-beam:before {
  content: "\e00d";
}
.socicon-bebee:before {
  content: "\e00e";
}
.socicon-bebo:before {
  content: "\e00f";
}
.socicon-behance:before {
  content: "\e010";
}
.socicon-blizzard:before {
  content: "\e011";
}
.socicon-blogger:before {
  content: "\e012";
}
.socicon-buffer:before {
  content: "\e013";
}
.socicon-chrome:before {
  content: "\e014";
}
.socicon-coderwall:before {
  content: "\e015";
}
.socicon-curse:before {
  content: "\e016";
}
.socicon-dailymotion:before {
  content: "\e017";
}
.socicon-deezer:before {
  content: "\e018";
}
.socicon-delicious:before {
  content: "\e019";
}
.socicon-deviantart:before {
  content: "\e01a";
}
.socicon-diablo:before {
  content: "\e01b";
}
.socicon-digg:before {
  content: "\e01c";
}
.socicon-discord:before {
  content: "\e01d";
}
.socicon-disqus:before {
  content: "\e01e";
}
.socicon-douban:before {
  content: "\e01f";
}
.socicon-draugiem:before {
  content: "\e020";
}
.socicon-dribbble:before {
  content: "\e021";
}
.socicon-drupal:before {
  content: "\e022";
}
.socicon-ebay:before {
  content: "\e023";
}
.socicon-ello:before {
  content: "\e024";
}
.socicon-endomodo:before {
  content: "\e025";
}
.socicon-envato:before {
  content: "\e026";
}
.socicon-etsy:before {
  content: "\e027";
}
.socicon-facebook:before {
  content: "\e028";
}
.socicon-feedburner:before {
  content: "\e029";
}
.socicon-filmweb:before {
  content: "\e02a";
}
.socicon-firefox:before {
  content: "\e02b";
}
.socicon-flattr:before {
  content: "\e02c";
}
.socicon-flickr:before {
  content: "\e02d";
}
.socicon-formulr:before {
  content: "\e02e";
}
.socicon-forrst:before {
  content: "\e02f";
}
.socicon-foursquare:before {
  content: "\e030";
}
.socicon-friendfeed:before {
  content: "\e031";
}
.socicon-github:before {
  content: "\e032";
}
.socicon-goodreads:before {
  content: "\e033";
}
.socicon-google:before {
  content: "\e034";
}
.socicon-google-scholar:before {
  content: "\e035";
}
.socicon-googlegroups:before {
  content: "\e036";
}
.socicon-googlephotos:before {
  content: "\e037";
}
.socicon-googleplus:before {
  content: "\e038";
}
.socicon-grooveshark:before {
  content: "\e039";
}
.socicon-hackerrank:before {
  content: "\e03a";
}
.socicon-hearthstone:before {
  content: "\e03b";
}
.socicon-hellocoton:before {
  content: "\e03c";
}
.socicon-heroes:before {
  content: "\e03d";
}
.socicon-hitbox:before {
  content: "\e03e";
}
.socicon-horde:before {
  content: "\e03f";
}
.socicon-houzz:before {
  content: "\e040";
}
.socicon-icq:before {
  content: "\e041";
}
.socicon-identica:before {
  content: "\e042";
}
.socicon-imdb:before {
  content: "\e043";
}
.socicon-instagram:before {
  content: "\e044";
}
.socicon-issuu:before {
  content: "\e045";
}
.socicon-istock:before {
  content: "\e046";
}
.socicon-itunes:before {
  content: "\e047";
}
.socicon-keybase:before {
  content: "\e048";
}
.socicon-lanyrd:before {
  content: "\e049";
}
.socicon-lastfm:before {
  content: "\e04a";
}
.socicon-line:before {
  content: "\e04b";
}
.socicon-linkedin:before {
  content: "\e04c";
}
.socicon-livejournal:before {
  content: "\e04d";
}
.socicon-lyft:before {
  content: "\e04e";
}
.socicon-macos:before {
  content: "\e04f";
}
.socicon-mail:before {
  content: "\e050";
}
.socicon-medium:before {
  content: "\e051";
}
.socicon-meetup:before {
  content: "\e052";
}
.socicon-mixcloud:before {
  content: "\e053";
}
.socicon-modelmayhem:before {
  content: "\e054";
}
.socicon-mumble:before {
  content: "\e055";
}
.socicon-myspace:before {
  content: "\e056";
}
.socicon-newsvine:before {
  content: "\e057";
}
.socicon-nintendo:before {
  content: "\e058";
}
.socicon-npm:before {
  content: "\e059";
}
.socicon-odnoklassniki:before {
  content: "\e05a";
}
.socicon-openid:before {
  content: "\e05b";
}
.socicon-opera:before {
  content: "\e05c";
}
.socicon-outlook:before {
  content: "\e05d";
}
.socicon-overwatch:before {
  content: "\e05e";
}
.socicon-patreon:before {
  content: "\e05f";
}
.socicon-paypal:before {
  content: "\e060";
}
.socicon-periscope:before {
  content: "\e061";
}
.socicon-persona:before {
  content: "\e062";
}
.socicon-pinterest:before {
  content: "\e063";
}
.socicon-play:before {
  content: "\e064";
}
.socicon-player:before {
  content: "\e065";
}
.socicon-playstation:before {
  content: "\e066";
}
.socicon-pocket:before {
  content: "\e067";
}
.socicon-qq:before {
  content: "\e068";
}
.socicon-quora:before {
  content: "\e069";
}
.socicon-raidcall:before {
  content: "\e06a";
}
.socicon-ravelry:before {
  content: "\e06b";
}
.socicon-reddit:before {
  content: "\e06c";
}
.socicon-renren:before {
  content: "\e06d";
}
.socicon-researchgate:before {
  content: "\e06e";
}
.socicon-residentadvisor:before {
  content: "\e06f";
}
.socicon-reverbnation:before {
  content: "\e070";
}
.socicon-rss:before {
  content: "\e071";
}
.socicon-sharethis:before {
  content: "\e072";
}
.socicon-skype:before {
  content: "\e073";
}
.socicon-slideshare:before {
  content: "\e074";
}
.socicon-smugmug:before {
  content: "\e075";
}
.socicon-snapchat:before {
  content: "\e076";
}
.socicon-songkick:before {
  content: "\e077";
}
.socicon-soundcloud:before {
  content: "\e078";
}
.socicon-spotify:before {
  content: "\e079";
}
.socicon-stackexchange:before {
  content: "\e07a";
}
.socicon-stackoverflow:before {
  content: "\e07b";
}
.socicon-starcraft:before {
  content: "\e07c";
}
.socicon-stayfriends:before {
  content: "\e07d";
}
.socicon-steam:before {
  content: "\e07e";
}
.socicon-storehouse:before {
  content: "\e07f";
}
.socicon-strava:before {
  content: "\e080";
}
.socicon-streamjar:before {
  content: "\e081";
}
.socicon-stumbleupon:before {
  content: "\e082";
}
.socicon-swarm:before {
  content: "\e083";
}
.socicon-teamspeak:before {
  content: "\e084";
}
.socicon-teamviewer:before {
  content: "\e085";
}
.socicon-technorati:before {
  content: "\e086";
}
.socicon-telegram:before {
  content: "\e087";
}
.socicon-tripadvisor:before {
  content: "\e088";
}
.socicon-tripit:before {
  content: "\e089";
}
.socicon-triplej:before {
  content: "\e08a";
}
.socicon-tumblr:before {
  content: "\e08b";
}
.socicon-twitch:before {
  content: "\e08c";
}
.socicon-twitter:before {
  content: "\e08d";
}
.socicon-uber:before {
  content: "\e08e";
}
.socicon-ventrilo:before {
  content: "\e08f";
}
.socicon-viadeo:before {
  content: "\e090";
}
.socicon-viber:before {
  content: "\e091";
}
.socicon-viewbug:before {
  content: "\e092";
}
.socicon-vimeo:before {
  content: "\e093";
}
.socicon-vine:before {
  content: "\e094";
}
.socicon-vkontakte:before {
  content: "\e095";
}
.socicon-warcraft:before {
  content: "\e096";
}
.socicon-wechat:before {
  content: "\e097";
}
.socicon-weibo:before {
  content: "\e098";
}
.socicon-whatsapp:before {
  content: "\e099";
}
.socicon-wikipedia:before {
  content: "\e09a";
}
.socicon-windows:before {
  content: "\e09b";
}
.socicon-wordpress:before {
  content: "\e09c";
}
.socicon-wykop:before {
  content: "\e09d";
}
.socicon-xbox:before {
  content: "\e09e";
}
.socicon-xing:before {
  content: "\e09f";
}
.socicon-yahoo:before {
  content: "\e0a0";
}
.socicon-yammer:before {
  content: "\e0a1";
}
.socicon-yandex:before {
  content: "\e0a2";
}
.socicon-yelp:before {
  content: "\e0a3";
}
.socicon-younow:before {
  content: "\e0a4";
}
.socicon-youtube:before {
  content: "\e0a5";
}
.socicon-zapier:before {
  content: "\e0a6";
}
.socicon-zerply:before {
  content: "\e0a7";
}
.socicon-zomato:before {
  content: "\e0a8";
}
.socicon-zynga:before {
  content: "\e0a9";
}

Buttons

It's easy to create a nice button (here with Pure CSS) :

follow qimzu

To use, place the following code just about anywhere.


HTML:

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

CSS:

.button-socicon [class^="socicon-"], .button-socicon [class*=" socicon-"] {
	vertical-align: middle;
	margin-right: 0.3em;
}

You prefer images ?

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

Generate your icons