Css 字体图标的渲染大小差异

我希望我的图标垂直居中，靠近我的文本，但有奇怪的大小差异，这使得它很难

为什么我的图标字体呈现出这些奇怪的大小差异

我使用psuedo元素：before在引导中使用的图标字体方法来放入内容

这就是尺寸

这是：之前的大小。为什么不同

HTML:

CSS:

[class^=ss-]，[class*=ss-]{ 垂直对齐：文本顶部； 右侧填充：5px； } .ss图片：前，.ss图片。右：后{ 内容：“请检查行高和字体大小

我想这两个页面属性是不同的

<h2>
  <i class="ss-picture"></i>
  Creatives
</h2>