When working with icon fonts, one of the issue you may encounter is when trying to vertically center the icon font against an adjacent text. If the text are all lowercase, the approach is pretty straightforward using CSS vertical-align:middle. However, when you have an all uppercase or a title case text, the icon starts to go out of alignment and possibly none of the usual vertical-align values can mitigate it. In this blog post, Jonathon Snook explains how he worked around this issue using some relative positioning and a manually set value using the ex unit on vertical-align. Hit the button to learn more.

View More