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

Question

我使用像\xe2\x80\xa6这样的图标字体

\n\n

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

因为我需要更大的图标字体大小，所以我使用 css 来做到这一点\xe2\x80\xa6

\n\n

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

但现在与第二行的差距分别是行高更大。我希望 i-inline-element 不会影响行高。希望我想要实现的目标很清楚。我该怎么做？

\n\n

我尝试添加到CSS

\n\n

line-height: 0px\n

或类似的东西。但它不起作用\xe2\x80\xa6

\n\n

\n

Answer 1

行高确实有效，但如果第一行有图标，则图标的字体大小会超过段落第一行的行高。因此，您可以尝试不将图标放在第一行，甚至可以使用负边距来避免超出范围。

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