带有边框的Bootstrap 3按钮图标在左边

Question

我试图创建左侧浮动图标的自举按钮，右侧边框填充按钮的全高。

我尝试过以下CSS：

a.btn.btn-xlg i {
    float: left;
    border-right: groove;
    height: 100%;
    display: inline-block;
    padding: 0 4%;
}

HTML是：

...
<a href="/job" class="btn btn-xlg btn-olive center-block"><i class="fox-job"></i>Jobs</a>
...

以下是我拍摄的截图：

更新

[class^="fox-"]:before, [class*=" fox-"]:before {
    font-family: "fox";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    font-size: 140%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0px 1px 5px rgba(255, 207, 118, 0.9);
}

是否有任何方法可以让边框覆盖按钮的整个高度，如屏幕截图所示？

顺便说一下，如果有，但不是必要的，任何解决方向都会更好。即在r​​tl文档中，不需要修改就可以将图标向右浮动而不是向左浮动。

更新2：

根据Ghassen Louhaichi的回答，我有这个屏幕截图：

我使用了以下CSS：

a.btn.btn-xlg i {
    float: left;
    border-right: groove;
    /* height: 100%; */
    display: inline-block;
    /* padding: 20px 16px; */
    height: 72px;
    padding: 20px 5px 0 0;
    margin-top: -20px;
    margin-bottom: -26px;
}

Answer 1

按钮中有一个填充，您需要删除并手动将按钮的内容放在垂直中心，或者将以下CSS规则添加到您的类中以使用负边距来抵消填充的效果（您可能不得不玩一点这个值，直到它看起来正确）：

a.btn.btn-xlg i {
    /* the other attributes... */

    /* set the icon height to the button height */
    height: 34px;
    /* pad the icon to be at the center instead of the top */
    padding: 9px 4%;
    /* adjust the negative margins to counter the padding effect */
    margin-top: -8px;
    margin-bottom: -6px;
}