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