How to vertically align glyph?

Question

I need the glyph to be vertically aligned to the text. Now it looks more like it's attached to the bottom.

Here as an example

<a href="#">Zoom</a>

a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
}

a:before { content:"\2039"; }

and a jsFiddle

Answer 1

This is easiest to do just with vertical-align and a fixed offset. For example

a:before { content:"\2039"; vertical-align:0.1em; }

a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
}

a:before { content:"\2039"; vertical-align:0.1em; }

<a href="#">Zoom</a>

See http://jsfiddle.net/csh0da6o/3/

Answer 2

You can apply vertical-align: top to the text with vertical align: middle on the glyph to achieve this behaviour. By adjusting the line-height of the glyph you can change its offset.

Here's a JsFiddle with the glyph aligned to the middle: http://jsfiddle.net/zephod/csh0da6o/2/