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.
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:
Removing the padding of the icon can be tricky. Maybe if you set the
span
todisplay: inline-block
you can useheight
,width
in combination withoverflow: hidden
.DEMO