Twitter's bootstrap folosește Pictograme de Glyphicons. Acestea sunt "`disponibil în gri închis și alb" în mod implicit:
Este posibil să utilizați unele trucuri CSS pentru a schimba culorile de icoane? Am fost în speranța pentru un alt css3 stralucirea care ar împiedica-o să aibă o imagine pictogramă stabilite pentru fiecare culoare.
Știu că puteți schimba culoarea de fundal a anexând (<i>
) element, dar nu'm vorbit despre pictograma culoare de prim-plan. Cred că ar fi posibil să inversul transparenței pe pictograma imagine și apoi setați culoarea de fundal.
Deci, pot adăuga culoare pentru procesul de bootstrap icoane folosind doar CSS?
Da, dacă utilizați Awesome Font cu Bootstrap! Icoanele sunt ușor diferite, dar există mai multe dintre ele, acestea arata grozav la orice dimensiune, și puteți schimba culorile de pe ei.
Practic icoanele sunt fonturi și puteți schimba culoarea de ele doar cu CSS culoare proprietate. Instrucțiuni de integrare sunt în partea de jos a paginii din link-ul furnizat.
Edit: Bootstrap 3.0.0 icoane sunt acum fonturi!
Ca alte persoane au menționat, de asemenea, cu eliberarea de Bootstrap 3.0.0, implicit icon hieroglife sunt acum fonturi, cum ar fi Font Minunat, iar culoarea poate fi schimbat pur și simplu prin schimbarea "culoare" proprietate CSS. Modificarea dimensiunii se poate face prin font-size
de proprietate.
Cu cea mai recentă versiune a Bootstrap RC 3, schimbarea de culoare de icoane este la fel de simplu ca adăugarea de o clasă cu culoarea pe care doriți și adăugându-l la span.
Default negru culoare:
<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>
ar deveni
<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>
CSS
.icon-success {
color: #5CB85C;
}
Pentru că glyphicons sunt acum fonturi, se poate folosi contextuale clase pentru a aplica culoarea corespunzătoare la icoane.
De exemplu:
<span class="glyphicon glyphicon-info-semn textul-info"></span>
adăugarea de text-info` la css va face pe pictograma info de culoare albastru.
Un alt mod posibil de a avea bootstrap icoane într-o culoare diferită este de a crea un nou .png în culoarea dorită (de ex. magenta) și salvați-l ca pe /cale-spre-bootstrap-css/img/glyphicons-halflings-magenta.png
În variabile.mai puțin găsiți
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
și să adăugați această linie
@iconMagentaSpritePath: "../img/glyphicons-halflings-magenta.png";
În sprites.mai puțin add
/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.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("@{iconMagentaSpritePath}");
}
Și de a folosi astfel:
<i class='icon-chevron-down icon-magenta'></i>
Sper că vă ajută pe cineva.
Rapid și treburile murdare pe care a făcut-o pentru mine, de fapt, nu colorat icoana, dar din jur cu o etichetă sau insigna în culoarea dorită;
<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>
Bootstrap Glyphicons sunt fonturi. Acest lucru înseamnă că poate fi modificat ca orice alt text prin CSS styling.
CSS:
<style>
.glyphicon-plus {
color: #F00;
}
</style>
HTML:
<span class="glyphicon glyphicon-plus"></span>
Exemplu:
<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.glyphicon-plus {
color: #F00;
}
</style>
</head>
<body>
<span class="glyphicon glyphicon-plus"></span>
</body>
</html>
Urmăriți curs de Până și să fie Difuzate cu Bootstrap 3 de Jen Kramer, sau viziona individuale lecție pe Imperative CSS de bază cu stiluri personalizate.
Acest lucru este un pic de sens giratoriu..
Am'am folosit hieroglife astfel de prognoze
</div>
<div class="span2">
<span class="glyphicons thumbs_up"><i class="green"></i></span>
</div>
<div class="span2">
<span class="glyphicons thumbs_down"><i class="red"></i></span>
</div>
și de a afecta culoarea, am inclus un pic de css la cap
<style>
i.green:before {
color: green;
}
i.red:before {
color: red;
}
</style>
Voila, verde și roșu degetele.
Acesta este de fapt foarte simplu:
doar folosi:
.icon-name{
color: #0C0;}
De exemplu:
.icon-compass{
color: #C30;}
Ca's a.
Utilizați masca-imaginea de proprietate, dar's un pic de un hack. L's-a demonstrat în Opera blog aici.
L's, de asemenea, descrise în profunzime aici.
Practic'd a crea o cutie CSS, cu spune un `background-image: gradient(foo); și apoi se aplică o mască de imagine să se bazeze pe acele imagini PNG.
S-ar economisi timp de dezvoltare individuală imagini în Photoshop, dar nu't cred că ar salva mult de lățime de bandă dacă nu'll fi afișate imaginile într-o mare varietate de culori. Eu personal n't-l folosească pentru că aveți nevoie pentru a ajusta markup pentru a folosi eficient tehnica, dar am'm un membru al "puritatea este imperitive" scoala-de-am crezut.
Acceptate răspuns (folosind font awesome) este cea corectă. Dar când am vrut doar varianta de culoare roșie pentru a arăta pe erori de validare, am ajuns sa folosesc un addon pachet, oferit cu amabilitate pe acest site.
Editat doar url-ul căi în css fișiere, deoarece acestea sunt absolute (începe cu /) și am prefera să fie relativă. Astfel:
.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}
Doar folosi GLYPHICONS și va fi capabil de a schimba culoarea doar setarea CSS:
#myglyphcustom {
color:#F00;
}
M-am gândit că aș putea adăuga acest fragment la acest post vechi. Aceasta este ceea ce am făcut în trecut, înainte de icoane au fost fonturi:
<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
Acest lucru este foarte similar cu @frbl 's mascate răspuns, dar nu utilizați o altă imagine. În schimb, aceasta stabilește culoare de fundal de <i> element la " alb " și utilizează CSS proprietatea border-radius
de <i> element "rotunjite." Daca ai observat, valoarea
border-radius(7.5 px) este exact jumătate din "lățime" și "înălțime" de proprietate (atât 15px, face pictograma pătrat), de a face
element circular.