CSS Icons: Cannot remove top and bottom padding (font awesome)

css, font-awesome-3.2, html

Solution

The `line-height` on the span won't help you much as the icon is added to the pseudo class `:before` on the `<i />` tag. This pseudo class will create a somewhat hidden element, if you can call it that.

So if you want to override the css:

.icon-check:before { font-size: 2rem; }

Removing the padding of the icon can be tricky. Maybe if you set the `span` to `display: inline-block` you can use `height`, `width` in combination with `overflow: hidden`.

span {
    border: 1px solid #FF0000;
    display: inline-block;
    height: 38px;
    overflow: hidden;
    position: relative;
    width: 45px;
}
i.icon-check:before {
    left: 0;
    position: absolute;
    top: -4px;
}

DEMO

Problem

Here is my fiddle: http://jsfiddle.net/schmudde/VeA6B/ I cannot remove the top and bottom padding on either side of a font awesome icon: ``` span { border: 1px solid red; line-height: 40%; } i { border: 1px solid green; padding: 0px; margin: 0px; display: inline-block; width: auto; height: auto; line-height: inherit; vertical-align: baseline; background-color: red; } <span><i class="icon-check icon-3x"></i></span> ``` I have attempted specific line-heights and inheriting line-heights. There is something fundamental here I am clearly not understanding.

Original source