替换分享工具自带图标

/** 外部盒子 **/ .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 { ; 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; }

替换分享工具自带图标

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

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

替换分享工具自带图标

默认的分享按钮

替换分享工具自带图标

美化后的分享按钮

基本原理就是找到默认分享代码的DIV选择器,然后隐藏背景图片,添加字体图标并重写样式。

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

  1. function entry_share($content) {
  2. if (is_single()) {
  3. class="entry-share">
  4. class="share-box">
  5. class="share-pu">分享到
  6. class="jiathis_style_32x32">
  7. class="jiathis_button_tsina">class="fa fa-weibo">
  8. class="jiathis_button_weixin">class="fa fa-wechat">
  9. class="jiathis_button_renren">class="fa fa-renren">
  10. class="jiathis_button_qzone">class="fa fa-qq">
  11. class="jiathis_button_fb">class="fa fa-facebook">
  12. class="jiathis_button_twitter">class="fa fa-twitter">
  13. "http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank">class="fa fa-share-alt">
  14. class="jiathis_counter_style">
  • }
  • return $content;
  • }
  • 之后分享代码会自动添加到文章正文的下面。

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

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

    展示代码展开

    1. /** 外部盒子 **/
    2. .entry-share {
    3. font-size: 14px;
    4. text-align: center;
    5. margin: 0 auto 20px;
    6. }
    7. /********* 分享文字 ********/
    8. .entry-share .share-pu {
    9. font-weight: 700;
    10. line-height: 40px;
    11. }
    12. .entry-share .share-pu {
    13. float: left;
    14. color: #4d4d4d;
    15. }
    16. /******** 分享样式 ********/
    17. .entry-share div.share-box {
    18. display: inline-block;
    19. overflow: hidden;
    20. }
    21. .entry-share .jiathis_style_32x32 {
    22. float: left !important;
    23. margin-left: 10px;
    24. }
    25. .entry-share .jiathis_style_32x32 a {
    26. float: left;
    27. width: 40px;
    28. height: 40px;
    29. color: #a8a8a8;
    30. font-size: 16px !important;
    31. display: block;
    32. border-radius: 5px;
    33. margin-right: 10px;
    34. border: 1px solid #999;
    35. }
    36. .entry-share .jiathis_style_32x32 a:hover {
    37. text-decoration: none;
    38. color: #fff;
    39. }
    40. /** 图标大小 **/
    41. .entry-share .jiathis_style_32x32 a span {
    42. background: transparent !important;
    43. width: 38px !important;
    44. height: 38px !important;
    45. padding: 0 !important;
    46. margin: 0 !important;
    47. float: none !important;
    48. font-size: 20px !important;
    49. display: block !important;
    50. text-align: center !important;
    51. line-height: 38px !important;
    52. }
    53. /******** 更多分享 ********/
    54. .entry-share .jiathis_style_32x32 a.jtico_jiathis {
    55. background: transparent !important;
    56. width: 38px !important;
    57. height: 38px !important;
    58. padding: 0 !important;
    59. margin: 0 !important;
    60. font-size: 24px !important;
    61. display: block !important;
    62. text-align: center !important;
    63. line-height: 38px !important;
    64. }
    65. .entry-share .jiathis_style_32x32 a:hover.jtico_jiathis {
    66. background: #666 !important;
    67. border-color: #666;
    68. }
    69. /******** 分享次数 ********/
    70. .entry-share .jiathis_style_32x32 a.jiathis_counter_style {
    71. width: auto;
    72. margin-left: 10px;
    73. padding: 0 15px;
    74. border-radius: 5px;
    75. display: inline-block;
    76. position: relative;
    77. background: #e8e8e8;
    78. border-color: #e8e8e8;
    79. color: #fff !important;
    80. }
    81. /** 箭头 **/
    82. .entry-share .jiathis_style_32x32 a.jiathis_counter_style:before {
    83. ;
    84. width: 0;
    85. height: 0;
    86. border-style: solid;
    87. border-width: 10px 10px 10px 0;
    88. border-color: transparent #e8e8e8 transparent transparent;
    89. position: absolute;
    90. right: 100%;
    91. top: 50%;
    92. margin-top: -10px;
    93. }
    94. .entry-share .jiathis_style_32x32 a.jiathis_counter_style span.jiathis_bubble_style {
    95. color: #666 !important;
    96. font-size: 14px !important;
    97. width: auto !important;
    98. }
    99. /******** 不同图标悬停背景颜色 ********/
    100. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_tsina {
    101. background: #e74c3c;
    102. border-color: #e74c3c;
    103. }
    104. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_weixin {
    105. background: #2ecc71;
    106. border-color: #2ecc71;
    107. }
    108. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_fb {
    109. background: #4760A5;
    110. border-color: #4760A5;
    111. }
    112. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_twitter {
    113. background: #50ABF1;
    114. border-color: #50ABF1;
    115. }
    116. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_renren {
    117. background: #3777BE;
    118. border-color: #3777BE;
    119. }
    120. .entry-share .jiathis_style_32x32 a:hover.jiathis_button_qzone {
    121. background: #2174C3;
    122. border-color: #2174C3;
    123. }

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

    注:

    因代码中使用了Font Awesome字体图标,如果你的主题没有加载字体图标,可以到WP后台--插件--安装插件页面搜索:Font Awesome 4 Menus 安装并启用,才能显示替换后的图标。

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


    官方运营-Sean丶♥

    771 SEO文章 文章

    评论