Search code examples
csshtmlfirefoxfont-awesome-4

Vertical centering of Fontawesome icons with text

I trying to center Fontawesome Icons vertically. These icons have to be centered inside a parent element. The problem is that i see some artifacts showing in Firefox (31) only when i hover over an element.

Please see jsfiddle link below: http://jsfiddle.net/8ap92j7z/1/

    <span class="big-icon">
    <a href="#">
        <span class="fa-stack fa-lg">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-sitemap fa-stack-1x fa-inverse"></i>
            <span class="text">Sitemap</span>
        </span>
    </a>
</span>

What am i doing wrong and how this can be fixed ?

Solution

  • Try .big-icon a {text-decoration: none;} - jsFiddle Example