with 2.1 custom icons in nav bar render as vertical line when link is active

[J]

Hi there,

I've just upgraded from 2.0.4 to 2.1. 

In my nav bar each link is prepended by an icon from glyphicons, e.g.

                        <li {% ifequal path '/' %} class = "active"{% 
endifequal %} >
                            <a href="/" class = "navigation_buttons">
                                <i class="icon-home icon-white"></i>
                                Home
                            </a>
                        </li>

I also included my own custom icons using the following

.icon-the-heart {
    background-image: url("/static/images/icon-the-heart.png");
    background-position: center center;
}


and I called it with 

<li {% ifequal path '/hearts' %} class = "active"{% endifequal %} >

    <a href="/hearts" class = "navigation_buttons">

        <i class="icon-the-heart"></i>

        Home

    </a>

</li>


This all works perfectly with 2.0.4. However when I upgraded to 2.1 when 
the link is "active" the icon is displayed as a narrow straight vertical 
line rather than a heart. When the link is inactive (i.e. I am at a 
different page) the heart displays as normal. This behaviour does not 
affect any of the glyphicons which I use in a similar way - just my custom 
icon.

Any idea how I can fix this issue?