How to use

Teddy Payet — 2024-03-11T12:39:57Z

How to use Socicon on your desktop computer

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

How to use Socicon on your website

Download the font and copy the unzipped folder in a directory of your website
Add the tag to your .
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;
}