Baidu Share with Font Awesome

Baidu Share with Font Awesome.markdown

Baidu Share with Font Awesome

A Pen by MOxFIVE on CodePen.

License.

index.html

<link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

<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>
<script>
  window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>

style.css

.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,
.bdsharebuttonbox .bds_more:hover {
  color: #fff !important;
}

.bdsharebuttonbox .bds_tsina {
  background: #db332f !important;
}
.bdsharebuttonbox .bds_sqq {
  background: #1cbcef !important;
}
.bdsharebuttonbox .bds_weixin {
  background: #8cdc49 !important;
}
.bdsharebuttonbox .bds_more {
  background: #8cbcf5 !important;
}