百度分享自带的图标有点简陋，而自己站点的图标基本来自 Font Awesome，为了美化和统一风格，对其中的图标进行了替换。
See the Pen Baidu Share with Font Awesome by MOxFIVE (@MOxFIVE) on CodePen.
前期准备
载入 Font Awesome
- 通过 CDN 加载 Font Awesome，一般放在页面头部
1
| <link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
|
添加图标 Class
- 在官网 图标列表 中查询所需代码，添加到百度分享提供的 HTML 代码中
- 下面以微博、微信等为例: (
fa 这个 class 要保留)
1
2
3
4
5
6
7
| <div class="bdsharebuttonbox">
<a href="#" class="fa fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="fa fa-qq bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
<a href="#" class="fa fa-weixin bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
<a href="#" class="fa fa-share-alt bds_more" data-cmd="more"></i>
</a>
</div>
|
样式修改
通过 CSS 修改图标的样式，以 微博、微信、QQ 、more(分享到…) 为例，样式已尽可能精简
基本样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.bdsharebuttonbox a,
.bdsharebuttonbox .bds_more {
width: 50px;
height: 50px !important;
line-height: 50px !important;
text-align: center;
padding-left: 0 !important;
font-size: 34px !important;
text-decoration: none;
color: #fff !important;
}
.bdsharebuttonbox a:hover,
.bds_more:hover {
color: #fff !important;
}
|
图标背景
1
2
3
4
5
6
7
8
9
10
11
12
| .bds_tsina {
background: #db332f !important;
}
.bds_sqq {
background: #1cbcef !important;
}
.bds_weixin {
background: #8cdc49 !important;
}
.bds_more {
background: #8cbcf5 !important;
}
|
相关链接
- Font Awesome: http://fontawesome.io/
- 百度分享: http://share.baidu.com/
- 百度分享网站ID列表: http://share.baidu.com/help/webid
