引导3按钮图标,左边有边框

填充整个高度

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

有没有办法让边框覆盖屏幕截图中所示的按钮的整个高度?

更新2:

根据加森·楼海池的回答,我得到了屏幕截图:

我使用了以下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;
}