darkstrap
darkstrap copied to clipboard
Support CDN Glyphicons?
I'm not too familiar with bootstrap, so please correct me if i am wrong anywhere, but it seems that Darkstrap should remove the following two CSS rules.
[class^="icon-"],
[class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
}
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings-white.png");
}
Why? Well, it assumes that your Bootstrap is a local instalation, rather than a CDN installation from http://www.bootstrapcdn.com/.
Now, unless i am mistaken, there is no need for this correct? By removing it, the glyph location will default back to the original bootstrap location, which will be identified based on the location on the bootstrap css file. Supporting both CDN and local installations.
Thoughts?
This is clearly out of scope of the project. I recommend you fork darkstrap and modify your copy.
@DamonGant How is it out of the project scope?
Isn't the goal of this project to complement Bootstrap? And if so, why complement Glyphicons? Darkstrap doesn't even have Glyphicons, does it?
By Darkstrap containing Glyphicon references, but not actually having any Glyphicons, all it is doing is forcing one type of Bootstrap usage. There is no need, am i wrong in this?
Sorry for the late response.
Yeah, the hard-coded image paths are problematic. It should lean on whatever you have configured for Bootstrap.
should not be this one closed? as the original bootstrap.css says following:
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
/* White icons with optional class, or on hover/focus/active states of certain elements */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:focus > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > li > a:focus > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:focus > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"],
.dropdown-submenu:focus > a > [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings-white.png");
}
whoever refers to custom glyphicons for bootstrap should do so for the darkstrap as well I guess.