title: 在百度分享中使用 Font Awesome 图标
date: 2016-04-20 11:25:10
categories:
- 术业专攻
tags:
- CSS
- Font-Awesome
permalink: baidu-share-fontawesome
---

　　百度分享自带的图标有点简陋，而自己站点的图标基本来自 [Font Awesome](http://fontawesome.io/)，为了美化和统一风格，对其中的图标进行了替换。

<!-- more -->
<p data-height="241" data-theme-id="0" data-slug-hash="ZWROBe" data-default-tab="css,result" data-user="MOxFIVE" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/MOxFIVE/pen/ZWROBe/">Baidu Share with Font Awesome</a> by MOxFIVE (<a href="http://codepen.io/MOxFIVE">@MOxFIVE</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>


## 前期准备

### 载入 Font Awesome
- 通过 CDN 加载 Font Awesome，一般放在页面头部
```html
<link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
```

### 添加图标 Class
- 在官网 [图标列表](http://fontawesome.io/icons/) 中查询所需代码，添加到百度分享提供的 HTML 代码中
- 下面以微博、微信等为例: (`fa` 这个 class 要保留)

```html
<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(分享到...) 为例，样式已尽可能精简

### 基本样式
```css
/*部分样式可能会被百度分享自带样式覆盖，因而加上 `!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;
}
```
### 图标背景

```css
.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/>
1. **百度分享**: <http://share.baidu.com/>
1. **百度分享网站ID列表**: <http://share.baidu.com/help/webid>