Cambia il colore dei glifi in blu in alcuni - ma non in tutti i punti usando Bootstrap 2

157

Sto usando il framework Bootstrap per la mia interfaccia utente. Voglio cambiare il colore dei miei glifi in blu, ma non in tutti i posti. In alcuni punti dovrebbe usare il colore predefinito.

Ho fatto riferimento a questi due collegamenti, ma non trovo nulla di utile.

Nota: sto usando Bootstrap 2.3.2 .

html css twitter-bootstrap-2

— Mike Phils
fonte

275

L'icona adotterà il colore dal valore della colorproprietà css del suo genitore.

Puoi aggiungerlo direttamente allo stile:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

Oppure puoi aggiungerlo come classe alla tua icona e quindi impostare il colore del carattere su di esso nel CSS

HTML

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

CSS

.blue {
    color: blue;
}

Questo violino ha un esempio.

— Vikas Ghodke
fonte

6

Grazie. Sto usando Bootstrap /2.3.2/.Non funziona per me.

— Mike Phils,

1

Tuttavia puoi usarlo, eliminare tutte le regole CSS per glyphicon e aggiungere questo file CSS netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/… e scaricare i caratteri glyphicon da bootstrap 3, questo allenamento.

— Vikas Ghodke,

3

@VikasGhodke, che richiederebbe comunque la migrazione dell'intero progetto alla versione 3.

— Maksim Vi.

194

Basta applicare la text-successclasse Bootstrap di Twitter su Glyphicon:

<span class="glyphicon glyphicon-play text-success">начал работу</span>

inserisci qui la descrizione dell'immagine

Elenco completo dei colori disponibili: Documentazione Bootstrap: classi di supporto
(è presente anche il blu)

— itsnikolay
fonte

2

perché mescolare le arance con le mele? : \

— Utente22999299

7

* начал работуè started a work. Avevo scritto la risposta al volo e non pensavo che sarebbe stata votata in alto. Quindi lo screenshot è stato realizzato in russo dalla mia app precedente per mostrare l'aspetto del markup.

— itsnikolay

3

Trovo molto appropriato se l'icona deve essere mostrata esattamente perché c'è stato un successo nell'operazione.

— Terix,

6

Questo è meglio perché il colore applicato sarà conforme all'attuale

— combinazione di

2

@naXa try text-danger. Ecco un elenco completo di colori.

— naXa,

24

Alla fine ho trovato la risposta da solo. Per aggiungere nuove icone nel bootstrap 2.3.2 dobbiamo aggiungere Font Awsome css nel tuo file. Dopo averlo fatto, possiamo sostituire gli stili con CSS per cambiare il colore e le dimensioni.

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

Se vogliamo cambiare il colore dell'icona, aggiungi semplicemente la classe marrone e l'icona diventerà marrone. Fornisce inoltre icone di varie dimensioni.

HTML

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

— Mike Phils
fonte

2

Le versioni più recenti (4.0.3 al momento di questo commento) sono disponibili su bootstrapcdn.com/#fontawesome_tab

— wizulus,

7

Puoi farlo anche tu, spero che ti aiuti

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

— Guven Sezgin Kurt
fonte

7

Per bootstrap 3.0, questo ha funzionato per me:

.myclass .glyphicon {color:blue !important;}

— Puddleglum
fonte

3

Sì, puoi impostare le icone sul colore bianco. ecco come ha funzionato per me.

Bootstrap <3

HTML

<i class="icon-ok icon-white"></i>

Ciò renderebbe la tua icona bianca.

— AJ
fonte

3

Ha icon-whitefunzionato per me con Bootstrap 2. La domanda per il blu, ma sapere che esiste una sola classe per il bianco sembra utile.

— sabato

3

Ho creato una libreria di colori alternativa per bootstrap 2.3.2 che è disponibile e semplice da usare per chiunque sia interessato a più colori per la vecchia libreria glyphicons.

— Eric Uldall
fonte

2

Se è solo un'icona bootstrap. Nota che le icone sono sotto il testo o piuttosto tipografia. Aggiungi la classe di colori del testo in questo modo. Ad esempio, text-primary, text-info e così via e così via per la classe icon:

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>

— White.Raven
fonte

2

Bootstrap> = v4.0 ha eliminato il supporto glyphicon

Rilasciato il carattere icona Glyphicons. Se hai bisogno di icone, alcune opzioni sono:

la versione a monte di Glyphicons

Octicons

Carattere fantastico

Fonte: https://v4-alpha.getbootstrap.com/migration/#components

Se si utilizza Bootstrap> = v4.0 o versioni successive, è possibile utilizzare le classi di stile esistenti di bootstrap come text-success, text-warningecc.

Ad esempio, se stai usando fontawesome:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

— Caner
fonte

2

CSS:

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

I glifi vengono rimossi in 4.0, consiglio Font-awesome 4 o successivi :)

— Michael Jørgensen
fonte

1

Tutte le risposte precedenti sono corrette ma qui è un modo semplice e veloce se hai solo bisogno di un'icona in un posto per cambiarne il colore:

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>

— grepit
fonte

0

Il colore non funziona, se si utilizza per l'immagine png del font bootstrap, come i.

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

HTML5 usa il filtro css per colorare l'immagine, ad esempio

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);

— Peter Mlich
fonte