the syntax is correct - you can apply the icons to any tag (you'd have to be careful doing this but the option)
if the attribute starts with (^) icon- and the other is the class contains (*) icon-white. If you change the css to not throw warning in the tools you use to develop stuff you may end up losing some good magic. (I am not sure if you will encounter issues with specificity ) much of the bootstrap css is not valid in that hacks are used. With css many have found it more efficient and maintainable to use css hacks "Doing the wrong thing for the right reasons" AFAIK all the major css frameworks use hacks browser makers have over time made a mess of the css spec. I have not used visual studio for sometime, but I would take what it says with a pinch of salt and get a second opinion - with the sheer number (and calibre) of developers contributing to bootstrap I would be really cautious to deviate from what bootstrap sets (changing img paths is not going to cause an issue) - S On 8 February 2012 18:51, Jon <[email protected]> wrote: > Thanks for the thorough reply. For now, my preference is to simply > override the background image reference, but was a little thrown by > CSS I don't quite understand. As indicated, I'm not using LESS. > > However, the following CSS causes the warning "Unexpected character > sequence. Expected a selector for the style rule." for me at the first > "[" in Visual Studio. Is this syntax correct? > > [class^="icon-"] { > background: url("my/new/sprite/location-relative-to-the-stylesheet- > rule-is-declared-in.png") > } > > On Feb 7, 3:16 pm, Sam Sherlock <[email protected]> wrote: > > You only have to change it one place (two if you count black & white > > versions) > > > > if using less you could use variables to set this > > > > if not using less then you can override the background image with the > > following > > > > [class^="icon-"] {background: > > > url("my/new/sprite/location-relative-to-the-stylesheet-rule-is-declared-in. > png")} > > > > and apply the same to .icon-white if you use that > > > > personally I would just make a list of the changes that you make and run > > through that list when upgrading > > but overriding them in a separate sheet is a good method of testing stuff > > > > - S > > > > On 7 February 2012 19:42, Jon <[email protected]> wrote: > > > > > > > > > > > > > > > > > Today, I started working with the Glyphicons that are now part of > > > Bootstrap. > > > > > Initially, the images did not appear. This was because the graphics > > > file was not in the expected folder. (Which as far as I can tell is > > > not documented anywhere.) > > > > > It looks like the location of this file is hard coded as ../img/ > > > glyphicons-halflings.png, which doesn't work all that well for me. > > > > > Can anyone comment on the thinking behind hard coding it at this > > > location? Perhaps there's a straight forward way to override it using > > > CSS that is a little beyond me? > > > > > Note that I'm not using LESS. I realize I could edit the file directly > > > but then this issue reappears every time we update to the latest > > > version of Bootstrap. >
