I added a pull request with a possible solution to this issue. I think it's a good solution for the problem but I have no clue whether it is worth adding to bootstrap. Have a look at
https://github.com/twitter/bootstrap/pull/4627 -- Natansh Verma Sent with Sparrow (http://www.sparrowmailapp.com/?sig) On Thursday, 23 August 2012 at 1:49 PM, J wrote: > 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? > >
