I was able to reproduce your issue with a jsfiddle. The thing is, due to the
CSS cascade rules, the default bootstrap CSS rule is picked up and it renders
the glyph icons as the background . That's why you see the vertical line. If
you change your css to
.nav > .active > a > .icon-the-heart {
...
}
Things should work.
Another workaround is to use the !important keyword at the end of the
background-image property, but that feels more hackish.
Check out a working fiddle -
http://jsfiddle.net/natansh/3CmGS/
I'll open an issue on github/work on improvements to see if this can be made
more smooth. For now, hope this solves your problem!
--
Natansh Verma
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)
On Thursday, 23 August 2012 at 2:29 AM, J wrote:
> 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?
