Posso aggiungere colore alle icone bootstrap solo usando CSS?

Il bootstrap di Twitter utilizza Icons by Glyphicons . Sono " available in dark gray and white" per impostazione predefinita:

È possibile utilizzare alcuni trucchi CSS per cambiare i colori delle icone? Speravo in qualche altra brillantezza css3 che avrebbe impedito di dover impostare un'immagine icona per ogni colore.

So che puoi cambiare il colore di sfondo <i>dell'elemento racchiuso ( ), ma sto parlando del colore di primo piano dell'icona. Immagino che sarebbe possibile invertire la trasparenza sull'immagine dell'icona e quindi impostare il colore di sfondo.

Quindi, posso aggiungere colore alle icone bootstrap solo usando CSS?

Sì, se usi Font Awesome con Bootstrap! Le icone sono leggermente diverse, ma ce ne sono molte, hanno un bell'aspetto a qualsiasi dimensione e puoi cambiarne i colori.

Fondamentalmente le icone sono caratteri e puoi cambiarne il colore solo con la proprietà color CSS. Le istruzioni di integrazione sono nella parte inferiore della pagina nel collegamento fornito.

Modifica: le icone Bootstrap 3.0.0 ora sono caratteri!

Come alcune altre persone hanno anche menzionato con il rilascio di Bootstrap 3.0.0, i glifi icona predefiniti ora sono caratteri come Font Awesome, e il colore può essere cambiato semplicemente cambiando la colorproprietà CSS. La modifica delle dimensioni può essere effettuata tramite la font-sizeproprietà.

Con l'ultima versione di Bootstrap RC 3, cambiare il colore delle icone è semplice come aggiungere una classe con il colore desiderato e aggiungerla all'intervallo.

Colore nero predefinito:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

potrebbe diventare

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

.icon-success {
    color: #5CB85C;
}

Elenco dei glifi di Bootstrap 3

Poiché i glifi sono ora caratteri, è possibile utilizzare le classi contestuali per applicare il colore appropriato alle icone.

Ad esempio: l' <span class="glyphicon glyphicon-info-sign text-info"></span> aggiunta text-infoal CSS renderà l'icona il colore blu delle informazioni.

Un altro modo possibile per avere icone bootstrap di un colore diverso è quello di creare un nuovo .png nel colore desiderato, (ad es. Magenta) e salvarlo come / path-to-bootstrap-css / img / glyphicons-halflings- magenta .png

Nel tuo variabili.less trova

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

e aggiungi questa riga

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

Nel tuo sprite.less aggiungere

/* 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}");
}

E usalo in questo modo:

<i class='icon-chevron-down icon-magenta'></i>

Spero che aiuti qualcuno.

Lavoro veloce e sporco attorno al quale è stato fatto per me, non colorando l'icona, ma circondandolo con un'etichetta o un badge nel colore desiderato;

<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>

I Glyphicons Bootstrap sono caratteri. Ciò significa che può essere modificato come qualsiasi altro testo tramite lo stile CSS.

CSS:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

<span class="glyphicon glyphicon-plus"></span>

Esempio:

<!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>

Guarda il corso Up and Running con Bootstrap 3 di Jen Kramer o guarda la lezione individuale su Override CSS centrale con stili personalizzati .

Tutto questo è un po 'rotonda ...

Ho usato i glifi in questo modo

  </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>

e per influenzare il colore, ho incluso un po 'di CSS alla testa in questo modo

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

Voila, pollici verdi e rossi.

Funziona anche con il tag di stile:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

In realtà è molto semplice:

basta usare:

.icon-name{
color: #0C0;}

Per esempio:

.icon-compass{
color: #C30;}

Questo è tutto.

Usa la mask-imageproprietà, ma è un po 'un trucco. È dimostrato nel blog Safari qui .

È anche descritto in modo approfondito qui .

Fondamentalmente dovresti creare una casella CSS, con dire a background-image: gradient(foo);e quindi applicare una maschera immagine ad essa basata su quelle immagini PNG.

Ti farebbe risparmiare tempo di sviluppo realizzando singole immagini in Photoshop, ma non credo che risparmierebbe molta larghezza di banda a meno che non visualizzerai le immagini in un'ampia varietà di colori. Personalmente non lo userei perché è necessario regolare il markup per utilizzare la tecnica in modo efficace, ma sono un membro della scuola di pensiero "la purezza è imperativa".

La risposta accettata (usando il font fantastico) è quella giusta. Ma poiché volevo solo mostrare la variante rossa sugli errori di convalida, ho finito con un pacchetto di componenti aggiuntivi, gentilmente offerto su questo sito .

Ho appena modificato i percorsi degli URL nei file CSS poiché sono assoluti (inizia con /) e preferisco essere relativo. Come questo:

.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;}

Puoi anche cambiare colore a livello globale

vale a dire

 .glyphicon {
       color: #008cba; 
   }

Usa i GLYPHICONS e sarai in grado di cambiare colore semplicemente impostando il CSS:

#myglyphcustom {
    color:#F00;
}

Ho pensato di aggiungere questo frammento a questo vecchio post. Questo è quello che avevo fatto in passato, prima che le icone fossero font:

<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>

Questo è molto simile alla risposta subdola di @frbl, ma non usa un'altra immagine. Invece, questo imposta il colore di sfondo <i>dell'elemento su whitee usa la proprietà CSS border-radiusper rendere <i>"arrotondato" l'intero elemento. Se hai notato, il valore di border-radius(7.5px) è esattamente la metà di quello della proprietà widthe height(entrambi 15px, rendendo quadrata l'icona), rendendo <i>circolare l' elemento.