在百度分享中使用 Font Awesome 图标

  百度分享自带的图标有点简陋,而自己站点的图标基本来自 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
/*部分样式可能会被百度分享自带样式覆盖,因而加上 `!important` 确保生效*/
.bdsharebuttonbox a, /*.bds_more 关联较多,需单独设置*/
.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 { /*QQ*/
background: #1cbcef !important;
}
.bds_weixin { /*微信*/
background: #8cdc49 !important;
}
.bds_more { /*分享到...*/
background: #8cbcf5 !important;
}

相关链接

  1. Font Awesome: http://fontawesome.io/
  2. 百度分享: http://share.baidu.com/
  3. 百度分享网站ID列表: http://share.baidu.com/help/webid
文章目录
  1. 1. 前期准备
    1. 1.1. 载入 Font Awesome
    2. 1.2. 添加图标 Class
  2. 2. 样式修改
    1. 2.1. 基本样式
    2. 2.2. 图标背景
  3. 3. 相关链接
|