How to vertically align an icon inside a span
<p>I have a <code>span</code> like this:</p>

<pre><code>&lt;span class="indicator"&gt;&lt;/span&gt;
</code></pre>

<p>Inside this <code>span</code> sometimes I have numbers like this:</p>

<pre><code>&lt;span class="indicator"&gt;
    &lt;span&gt;10&lt;/span&gt;
&lt;/span&gt;
</code></pre>

<p>And, sometimes some Kendo-UI icons, like this:</p>

<pre><code>&lt;span class="indicator"&gt;
    &lt;span class="k-font-icon k-i-checkmark"&gt;&lt;/span&gt;
&lt;/span&gt;
</code></pre>

<p>And, here is my css:</p>

<pre><code>span.indicator {
    position: relative;
    border: 1px solid #8a8a8a;
    background: #8a8a8a;
    color: #ffffff;
    font-size: 0.85em;
    font-family: helvetica;
    padding: 2px;
    margin: 2px;
    width: 30px;
    overflow: visible;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
}

.k-font-icon {
    font-family: KendoUIGlyphs;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    font-size: 1.3em;
    line-height: 1;
    opacity: 1;
    text-indent: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: none;
    font-size: 16px;
}
</code></pre>

<p>There are two problems:</p>

<ol>
<li>I want the two <code>span</code> indicators to have the same heights. The height of
the one with icon is one pixel more than the other one. </li>
<li>The icon in the <code>span</code> with icon is not vertically aligned.</li>
</ol>

<p><strong>UPDATE:</strong></p>

<p>I realized if I change the <code>font-size</code> of <code>.k-font-icon</code> to <code>1em</code>, both issues will be resolved, but the icon will be too small.</p>

<p><strong>UPDATE 2:</strong></p>

<p>Here's a Kendo UI <a href="http://dojo.telerik.com/OFARe" rel="nofollow">Dojo</a>.</p>