css - 左侧带边框的 Bootstrap 3 按钮图标

Question

我正在尝试创建图标 float 在左侧的 Bootstrap 按钮，它的右边框填充按钮的整个高度。

我尝试了以下 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);
}

有什么方法可以让边框覆盖屏幕截图中显示的按钮的整个高度？

顺便说一句，如果有，但不是必需的，任何解决方案方向越少越好。也就是说，在 rtl 文档中，无需修改即可将图标 float 到右侧而不是左侧。

更新 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;
}