替换分享工具自带图标

目前常用的社会化分享工具有百度分享和JiaThis，特别是这个JiaThis年代够久远，在百度也加入这个领域后，居然还坚持为大家提供免费工具，这里点个大大的赞！

随着时代的变化，这些分享工具自带的小图标却一成不变，已不符合目前流行的扁平化风格，与网站风格极不协调，但有些网站虽用的也上面两款分享工具，但图标却不一样，扁平、大方、简洁，显得高大上。今天就分享一下修改后的代码，起个抛砖引玉的作用，以JiaThis分享工具为例，下面是修改后的效果：

默认的分享按钮

美化后的分享按钮

基本原理就是找到默认分享代码的DIV选择器，然后隐藏背景图片，添加字体图标并重写样式，下面是给WordPress程序搭建的网站修改默认分享图标的过程，其他程序也大同小异。

一、首先将下面代码添加到当前主题functions.php的最后：

function entry_share($content) {
if (is_single()) {
    $content .= '
    <div class="entry-share">
        <div class="share-box">
            <span class="share-pu">分享到</span>
            <!-- JiaThis Button BEGIN -->
            <div class="jiathis_style_32x32">
                <a class="jiathis_button_tsina"><i class="fa fa-weibo"></i></a>
                <a class="jiathis_button_weixin"><i class="fa fa-wechat"></i></a>
                <a class="jiathis_button_renren"><i class="fa fa-renren"></i></a>
                <a class="jiathis_button_qzone"><i class="fa fa-qq"></i></a>
                <a class="jiathis_button_fb"><i class="fa fa-facebook"></i></a>
                <a class="jiathis_button_twitter"><i class="fa fa-twitter"></i></a>
                <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"><span><i class="fa fa-share-alt"></i></span></a>
                <a class="jiathis_counter_style"></a>
            </div>
        </div>
        <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
        <!-- JiaThis Button END -->
    </div>';
}
return $content;
}
add_filter('the_content','entry_share');

之后分享代码会自动添加到文章正文的下面。

上面代码只是在原JiaThis分享代码基础上添加了字体图标。

二、再把下面配套的样式添加到当前主题样式文件style.css中即可。

/** 外部盒子 **/
.entry-share {
    font-size: 14px;
    text-align: center;
    margin: 0 auto 20px;
}
/********* 分享文字 ********/
.entry-share .share-pu {
    font-weight: 700;
    line-height: 40px;
}
.entry-share .share-pu {
    float: left;
    color: #4d4d4d;
}
/******** 分享样式 ********/
.entry-share div.share-box {
    display: inline-block;
    overflow: hidden;
}
.entry-share .jiathis_style_32x32 {
    float: left !important;
    margin-left: 10px;
}
.entry-share .jiathis_style_32x32 a {
    float: left;
    width: 40px;
    height: 40px;
    color: #a8a8a8;
    font-size: 16px !important;
    display: block;
    border-radius: 5px;
    margin-right: 10px;
    border: 1px solid #999;
}
.entry-share .jiathis_style_32x32 a:hover {
    text-decoration: none;
    color: #fff;
}
/** 图标大小 **/
.entry-share .jiathis_style_32x32 a span {
    background: transparent !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    font-size: 20px !important;
    display: block !important;
    text-align: center !important;
    line-height: 38px !important;
}
/******** 更多分享 ********/
.entry-share .jiathis_style_32x32 a.jtico_jiathis {
    background: transparent !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 24px !important;
    display: block !important;
    text-align: center !important;
    line-height: 38px !important;
}
.entry-share .jiathis_style_32x32 a:hover.jtico_jiathis {
    background: #666 !important;
    border-color: #666;
}
/******** 分享次数 ********/
.entry-share .jiathis_style_32x32 a.jiathis_counter_style {
    width: auto;
    margin-left: 10px;
    padding: 0 15px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    background: #e8e8e8;
    border-color: #e8e8e8;
    color: #fff !important;
}
/** 箭头 **/
.entry-share .jiathis_style_32x32 a.jiathis_counter_style:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #e8e8e8 transparent transparent;
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -10px;
}
.entry-share .jiathis_style_32x32 a.jiathis_counter_style span.jiathis_bubble_style {
    color: #666 !important;
    font-size: 14px !important;
    width: auto !important;
}
/******** 不同图标悬停背景颜色 ********/
.entry-share .jiathis_style_32x32 a:hover.jiathis_button_tsina {
    background: #e74c3c;
    border-color: #e74c3c;
}
.entry-share .jiathis_style_32x32 a:hover.jiathis_button_weixin {
    background: #2ecc71;
    border-color: #2ecc71;
}
.entry-share .jiathis_style_32x32 a:hover.jiathis_button_fb {
    background: #4760A5;
    border-color: #4760A5;
}
.entry-share .jiathis_style_32x32 a:hover.jiathis_button_twitter {
    background: #50ABF1;
    border-color: #50ABF1;
}
.entry-share .jiathis_style_32x32 a:hover.jiathis_button_renren {
    background: #3777BE;
    border-color: #3777BE;
}
.entry-share .jiathis_style_32x32 a:hover.jiathis_button_qzone {
    background: #2174C3;
    border-color: #2174C3;
}

鼠标悬停在分享按钮上，背景会变成不同的颜色。

如果你动手能力比较强，也可以同样替换百度分享图标。