用图标bootstrap 3创建按钮？

Question

我需要在Bootstrap 3中创建这种按钮：

问题在于文本和图标之间的界限：我已经尝试了很多但仍然没有得到相同的外观：（

以下是我现在所拥有的

CSS

.btn-default, .btn-default:active, .btn-default:focus{
    background-color:#fff;
    background-color: rgba(255,255,255, 1.0);
    -webkit-box-shadow: 0px 4px 0px 0px rgba(48, 174, 227, 1.0);
    -moz-box-shadow:    0px 4px 0px 0px rgba(48, 174, 227, 1.0);
    box-shadow:         0px 4px 0px 0px rgba(48, 174, 227, 1.0);
    border-top:1px solid rgba(48, 174, 227, 1.0);
    border-left:1px solid rgba(48, 174, 227, 1.0);
    border-right:1px solid rgba(48, 174, 227, 1.0);
}

HTML

<a href="#" class="btn btn-default"><i class="fa fa-lg fa-file-excel-o"></i>Export to excel</a>

也许答案在btn组中，但该图标也可点击：（

Answer 1

演示 - http://www.bootply.com/vVPtGC3QEs

a.btn{
 padding:4px 15px;
}

.fa-lg{
  border-right: 2px solid rgba(48, 174, 227, 1.0);
  padding-right: 7px;
  margin-right: 8px;
  vertical-align: initial;
  line-height:28px;
}