Rendered Size Differences for Font Icons

Question

I want my icons to be vertically centered next to my text but there are weird size differences that are making it difficult.

Why are my icon fonts rendering with these weird size differences?

I'm using the icon font method used in Bootstrap (using psuedo element :before to put the content in).

This is the <i class='icon'></i> size.

This is the <i class='icon'></i>:before size. Why is it different?

HTML:

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

CSS:

[class^="ss-"], [class*=" ss-"] {
  vertical-align: text-top;
  padding-right: 5px;
}

.ss-picture:before, .ss-picture.right:after {
  content: '';
}

[class^="ss-"], [class*=" ss-"] {
  font-family: "SSStandard";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

Answer 1

please check line height and font size.

I thin both page property are different.