效果测试:

推特 微信 微博 脸书 谷歌 Github 豆瓣 V2EX 知乎 维基百科 简书 优酷 YouTube

功能代码来自: @罗磊

代码是集成在 Ghost 主题里的,还做了一定的优化,我就比较粗暴,css、js 拿来之!

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1451113484_260868.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/font_1451113484_260868.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_1451113484_260868.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/font_1451113484_260868.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_1451113484_260868.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;display:inline-block;-moz-osx-font-smoothing:grayscale;speak:none;vertical-align:middle}
.iconfont:hover{opacity:.6;color:#363636}.iconfont.undefined{display:none!important}.iconfont-self{color:red}.iconfont-weibo{color:#e6162d}.iconfont-twitter{color:#2aa9e0}.iconfont-facebook{color:#204385}.iconfont-google{color:#176dee}.iconfont-wikipedia{color:#626262}.iconfont-weixin{color:#75d140}.iconfont-qzone{color:#186cc6}.iconfont-github{color:#333}.iconfont-douban{color:#279337}.iconfont-luolei{color:#6596c1}.iconfont-dribble{color:#f72d84}.iconfont-zhihu{color:#0767c8}.iconfont-instagram{color:#9b6954}.iconfont-v2ex{color:#1a1a1b}.icon-weibo-pure{color:#e6162d}.icon-twitter-pure{color:#2aa9e0}.icon-github-pure{color:#333}.icon-dribble-pure{color:#f72d84}.icon-weixin-pure{color:#75d140}.iconfont-jianshu{color:#e78170}.iconfont-youku{color:#06a7e1}.iconfont-youtube{color:#e52413}
.post-content .iconfont-local:before{content:'\0f00ac'}.post-content .iconfont-twitter:before{content:'\00e604'}.post-content .iconfont-wechat:before{content:'\00e606'}.post-content .iconfont-weibo:before{content:'\00e607'}.post-content .iconfont-facebook:before{content:'\00e601'}.post-content .iconfont-google:before{content:'\00e602'}.post-content .iconfont-github:before{content:'\00e60d'}.post-content .iconfont-douban:before{content:'\0e600'}.post-content .iconfont-v2ex:before{content:'\00e605'}.post-content .iconfont-zhihu:before{content:'\00e609'}.post-content .iconfont-wikipedia:before{content:'\00e608'}.post-content .iconfont-jianshu:before{content:'\00e60b'}.post-content .iconfont-youku:before{content:'\00e60c'}.post-content .iconfont-youtube:before{content:'\00e60a'}.post-content a .iconfont {line-height: 2.8rem;padding-right: .3rem;vertical-align: baseline; }

post-content 是文章部分的 class 属性,远程下载作者托管在阿里云的字体图标文件。

    script
        $(document).ready (function() {
            function urlIconlize(url) {
                var domain,
                    _output;
                var iconFontTag = 'iconfont';
                var iconMap = {
                    'twitter': iconFontTag + '-twitter',
                    'wechat': iconFontTag + '-wechat',
                    'qzone': iconFontTag + '-qzone',
                    'weibo': iconFontTag + '-weibo',
                    'facebook': iconFontTag + '-facebook',
                    'github': iconFontTag + '-github',
                    'douban': iconFontTag + '-douban',
                    'google': iconFontTag + '-google',
                    'luolei': iconFontTag + '-luolei',
                    'dribble': iconFontTag + '-dribble',
                    'v2ex': iconFontTag + '-v2ex',
                    'zhihu': iconFontTag + '-zhihu',
                    'wikipedia': iconFontTag + '-wikipedia',
                    'jianshu': iconFontTag + '-jianshu',
                    'youku': iconFontTag + '-youku',
                    'youtube': iconFontTag + '-youtube'
                }
                for (var name in iconMap) {
                    if (typeof iconMap[name] !== 'function') {
                        var MapKey = name;
                        if (url.indexOf(MapKey) >= 0) {
                            domain = MapKey;
                            _output = iconMap[MapKey];
                        }
                    }
                }
                return _output;
            };
            function addIcons() {
                $('.post-content  a:not(:has(img))').each(function(i) {
                    var _src = $(this).attr('href');
                    var tmp = document.createElement('a');
                    tmp.href = _src;
                    _selfDomain = tmp.hostname;
                    urlIconlize(_selfDomain);
                    $(this).prepend('<i class="iconfont ' + urlIconlize(_selfDomain) + '"></i>');
                });
            }
            addIcons();
        });

收工!