Perfect Icons

Usage

1 Download the font files in the zip file below. Extract and upload to your web directory.

socicon.zip

2 Add the following CSS to your stylesheet and set the correct path to the font files.

@font-face {
    font-family: 'si';
    src: url('PATH_TO/socicon.eot');
    src: url('PATH_TO/socicon.eot?#iefix') format('embedded-opentype'),
         url('PATH_TO/socicon.woff') format('woff'),
         url('PATH_TO/socicon.ttf') format('truetype'),
         url('PATH_TO/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(PATH_TO/socicon.svg) format(svg);
    }
}

.soc {
    overflow:hidden;
    margin:0; padding:0;
    list-style:none;
}

.soc li {
    display:inline-block;
    *display:inline;
    zoom:1;
}

.soc li a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 44px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-right: 10px;
    color: #ffffff;
    background-color: transparent;
}

.soc a:hover {
    z-index: 2;
    
}

.soc-icon-last{
    margin:0 !important;
}



                    

3 Place the following HTML where you would like the icons to show.

That's it! Now you have perfect icons on your website. Help other people put perfect icons on their site by sharing below.