CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
SaidbakR
SaidbakR

Reputation: 13534

Bootstrap 3 button icon with border on the left

I'm trying to create bootstrap button with icon floated on the left and it has right border fills the full height of the button.

I have tried the following CSS:

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

And the HTML is:

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

The following is a screen shot for what I have gotten:

enter image description here

Update

[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);
}

Is there any way that allows the border to cover the full height of the button as shown in the screen shot?

By the way if there is, but it is not essential, any solution direction less would be better. i.e in the rtl documents it does not need modification to float the icon to the right instead of left.

Update 2:

According to Ghassen Louhaichi answer, I have got that screen shot: enter image description here

And I used the following 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;
}

Upvotes: 4

Views: 6419

Answers (1)

M0nst3R
M0nst3R

Reputation: 5283

There is a padding in the button that you either need to remove and place the contents of the button in the vertical center manually, or add the following CSS rules to your class to counter the effect of the padding using negative margin (you may have to play around with the value a bit until it looks right) :

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

Upvotes: 2

Related Questions