垂直对齐

本教程是 Iconify for Ember 教程 的一部分。

当图标在文本中渲染时，默认情况下它会像其他图像一样与基线对齐。

表情符号和图标字体的渲染位置会略低于基线，就像普通文本一样。

如果要在文本中渲染图标，你可能希望为每个图标添加 vertical-align，使其渲染位置略低于基线，从而更好地融入文本，效果类似于表情符号和图标字体：

SVG in text:

SVG in text with vertical-align: -0.125em:

inline 属性

无需为每个图标添加 vertical-align，图标组件提供了一个 inline 属性。为图标组件添加 inline 属性等同于设置 style="vertical-align: -0.125em"：

Inline attribute demo:

hbs<p>
   Inline attribute demo:
   <IconifyIcon @icon='line-md:image-twotone' @inline={{true}} />
   <IconifyIcon @icon='mdi:account-box-outline' @inline={{true}} />
</p>

重要提示：此属性不会更改图标的 display 模式。它仅添加 vertical-align 样式。