Hi Natansh,
Thanks for the quick response :) Your solution works perfectly!
A quick heads up for anyone else with a similar issue, you need to add
Natansh's fix in addition to the original icon class otherwise the icon
only renders when the particular nav component is active :)
Cheers,
J
On Thursday, August 23, 2012 8:30:21 AM UTC+1, Natansh Verma wrote:
>
> 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?
>
>
>
