Need help with monosocialiconsfont?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

drinchev
416 Stars 59 Forks SIL Open Font License 1.1 7 Commits 42 Opened issues

Description

Mono Social Icons Font

Services available

!
?

Need anything else?

Contributors list

# 272,754
Ruby
Shell
CSS
4 commits
# 218,877
cash
webfont
HTML
Markdow...
2 commits

Mono Social Icons Font

Mono Social Icons Font is a webfont based on Mono Social Icons, which includes ~100 social icons in three variations under one font : circled, rounded and regular.

Demo & dowmload links : http://drinchev.github.io/monosocialiconsfont

How to use

This font comes with included liga feature for letter substitution of your icons. You can also use the unicode method for referring to the unicode places in the font table.

HTML

Twitter symbol : circletwitterbird

Twitter symbol with unicode : 

Follow us

Unicode : Follow us

CSS

@font-face {
    font-family: 'Mono Social Icons Font';
    src: url('MonoSocialIconsFont-1.10.eot');
    src: url('MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
         url('MonoSocialIconsFont-1.10.woff') format('woff'),
         url('MonoSocialIconsFont-1.10.ttf') format('truetype'),
         url('MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
    src: url('MonoSocialIconsFont-1.10.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.symbol, a.symbol:before { font-family: 'Mono Social Icons Font'; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }

a.symbol:before { content: attr(title); margin-right: 0.3em; font-size: 130%; }

Or if you work with Compass, then you can use

@include font-face("Mono Social Icons Font", font-files("MonoSocialIconsFont-1.10.woff", "MonoSocialIconsFont-1.10.ttf", "MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont"), "MonoSocialIconsFont-1.10.eot", normal, normal);

.symbol, a.symbol:before { font-family: 'Mono Social Icons Font'; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }

a.symbol:before { content: attr(title); margin-right: 0.3em; font-size: 130%; }

Changelog

Version 1.10 ( 21 May 2013 )

  • updated twitter bird icon
  • added instagram icon
  • minor fixes of some ligatures

Special Thanks

This font is based on Mono Social Icons by IconDock and Double-J Design. It adds two more icons to the set : Google Plus and GitHub Alternative Icon

License

It's free for whatever use ( commercial or personal ), both for web or for printing purpose. Licensed under the Open Font License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.