I have used Cornerstone Custom Icons to make a "hovercraft" icon and have inserted into my page without any issues. This icon is to match size, location and position of two other standard icons, all in their own column in a single section. The problem is that the new icon is much lower in its circular graphic than the rest.
I have the following html and class detail:
<a href="www.rockledgemarineservices.com/hovercraft"><div class="x-icon-hover"></div></a>
display: inline-block; width: 3em; height: 3em; border: 4px solid; font-size: 2.5em; line-height: 2.75em; text-align: center; color: #02AED7; border-radius: 100em;