创建带有图标引导程序 3 的按钮？答案

【问题标题】：Create button with icons bootstrap 3?创建带有图标引导程序 3 的按钮？
【发布时间】：2014-12-09 16:31:54
【问题描述】：

我需要在 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 组中，但该图标也可以点击 :(

【问题讨论】：

您是否尝试在图标和文本之间添加带有border-left: solid 1px #YOURCOLOR 的跨度？如果我没记错的话，您至少需要将 span 的宽度设置为 1px。
可以这样添加，但是尝试添加边框，你会看到会发生什么，我想将它分成两半，边框全高，边框的问题是它只能进入内部
好的，我试试看

标签： css button twitter-bootstrap-3

【解决方案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;
}

【讨论】：

好的，但是这样你编辑了很多默认的引导类
@Gorostas 好吧，保持 Bootstrap 类不变，创建自己的类并覆盖一些属性，例如 this
你可以添加自己的类@Gorostas