图标字体：使用更大的font-size（内联元素）而不影响行高

Question

我使用像...这样的图标字体

<p> Bla bla bla <i data-icon="a"></i>
<br/> Second Line Bla bla bla bla bla </p>

因为我需要一个更大的字体大小的图标我用css来做...

p i{
  font-size: 20px;
  position: relative;
  top: -3px; /* to adjust the position */
}

但现在与第二行的间隙分别是线高更大。我希望i-inline-element不影响行高。 我希望很清楚我想要实现的目标。我怎么能这样做？

我试图添加到css

line-height: 0px

或类似的东西。但它不起作用......

小提琴http://jsfiddle.net/THnNe/1

Answer 1

行高确实有效，但如果第一行中有图标，则图标的字体大小会超出段落第一行的行高。因此，您可以尝试不将图标放在第一行，也可以尝试使用负边距进行超越。

i{
  font-size: 50px;
  position: relative;
  line-height: 0px;
}
p{
  margin-top:-10px;
}

http://jsfiddle.net/e34QM/

Answer 2

JSfiddle Demo

<强> CSS

.icon-video-1:before {
    font-size: 100px;
    display: inline-block;
    vertical-align: bottom;
}