How to use

Socicon on your website

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

How to use Socicon on your website

  1. Download the font and copy the unzipped folder in a directory of your website
  2. Add the tag <link rel="stylesheet" href="your/directory/to/socicon/style.css" type="text/css"> to your <head>.
  3. Then, add the Socicon CSS class to any HTML tag + your styles. For example : class="socicon-github" for the icon:

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?pkydzl');
  src:  url('fonts/Socicon.eot?pkydzl#iefix') format('embedded-opentype'),
    url('fonts/Socicon.ttf?pkydzl') format('truetype'),
    url('fonts/Socicon.woff?pkydzl') format('woff'),
    url('fonts/Socicon.svg?pkydzl#Socicon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

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: never;
  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;
}