Altere a cor dos glyphicons para azul em alguns - mas não em todos os lugares usando o Bootstrap 2

Estou usando a estrutura do Bootstrap para minha interface do usuário. Quero mudar a cor dos meus glyphicons para azul, mas não em todos os lugares. Em alguns lugares, deve usar a cor padrão.

Mencionei esses dois links, mas não estou encontrando nada útil.

• Posso adicionar cores aos ícones de auto-inicialização apenas usando CSS?
• Como altero os glyphicons do Bootstrap 3 para branco?

Atenção: eu estou usando o Bootstrap 2.3.2 .

O ícone adotará a cor do valor da colorpropriedade css de seu pai.

Você pode adicionar isso diretamente ao estilo:

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

Ou você pode adicioná-lo como uma classe ao seu ícone e depois definir a cor da fonte em 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;
}

Este violino tem um exemplo.

Simplesmente aplique a text-successclasse Twitter Bootstrap no Glyphicon:

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

Lista completa de cores disponíveis: Documentação do Bootstrap: Classes auxiliares
(o azul também está presente)

Finalmente eu encontrei a resposta. Para adicionar novos ícones no bootstrap 2.3.2, precisamos adicionar o Font Awsome css em seu arquivo. Depois de fazer isso, podemos substituir os estilos com css para alterar a cor e o tamanho.

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

CSS

.brown{color:#9b846b}

Se quisermos mudar a cor do ícone, basta adicionar a classe marrom e o ícone ficará na cor marrom. Também fornece ícone de vários tamanhos.

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>

Você pode fazer isso também, espero que ajude

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

Para o bootstrap 3.0, isso funcionou para mim:

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

Sim, você pode definir os ícones para a cor branca. aqui está como funcionou para mim.

Bootstrap <3

HTML

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

Isso faria seu ícone parecer branco.

Eu criei uma biblioteca de cores alternativas para o bootstrap 2.3.2 , está disponível e é simples de usar para qualquer pessoa interessada em mais cores para a antiga biblioteca de glyphicons.

Se for apenas um ícone de inicialização. Observe que os ícones estão sob texto ou melhor, tipografia. Basta adicionar a classe de cores do texto assim. Por exemplo, texto primário, informação de texto e assim por diante, para a classe icon:

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

Bootstrap> = v4.0 eliminou o suporte ao glyphicon

A fonte do ícone Glyphicons caiu. Se você precisar de ícones, algumas opções são:

a versão upstream do Glyphicons

Octicons

Font Awesome

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

Se você estiver usando Bootstrap> = v4.0 ou mais recente, você pode usar classes de estilo existente de inicialização tais como text-success, text-warningetc.

Por exemplo, se você estiver usando o fontawesome:

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

CSS:

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

HTML

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

Glyphicons são removidos na versão 4.0, eu recomendo o Font-awesome 4 ou mais recente :)

Todas as respostas anteriores estão corretas, mas aqui está uma maneira simples e rápida, se você precisar de apenas um ícone em um só lugar para mudar sua cor:

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

A cor não funciona, se você usar a imagem png da fonte de inicialização, como eu.

[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 filtro css para colorir a imagem, exemplo

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