CSS图标:无法删除顶部和底部填充(字体很棒) [英] CSS Icons: Cannot remove top and bottom padding (font awesome)

问题描述

这是我的小提琴:

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.

推荐答案

跨度上的line-height对您没有多大帮助，因为图标已添加到<i />标记上的伪类:before中.如果可以调用该伪类，它将创建一个有点隐藏的元素.

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.

因此，如果您想覆盖CSS:

So if you want to override the css:

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

删除图标的填充可能很棘手.也许如果将span设置为display: inline-block，则可以将height，width与overflow: hidden结合使用.

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

演示

这篇关于CSS图标:无法删除顶部和底部填充(字体很棒)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！