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


157

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.

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

Respostas:


275

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.


6
Obrigado. Estou usando o Bootstrap /2.3.2/. Não está funcionando para mim.
Mike Phils

1
Ainda assim, você pode usá-lo, exclua todas as regras css do glyphicon e adicione esse arquivo css netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/… e faça o download das fontes glyphicon do bootstrap 3. Isso funcionará.
Vikas Ghodke

3
@VikasGhodke, isso ainda exigiria a migração de todo o projeto para a versão 3.
Maksim Vi.

194

Simplesmente aplique a text-successclasse Twitter Bootstrap no Glyphicon:

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

insira a descrição da imagem aqui

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


2
por que misturar laranjas com maçãs? : \
USer22999299

7
* начал работуé started a work. Escrevi a resposta rapidamente e não achei que fosse votada com força. Assim, a captura de tela foi feita em russo do meu aplicativo anterior para mostrar como era a marcação.
itsnikolay

3
Acho muito apropriado que o ícone deva ser mostrado exatamente porque houve um sucesso na operação.
Terix 23/09

6
Isto é melhor porque a cor aplicada estará de acordo com o esquema atual cor do tema Bootstrap
Remus Rusanu

2
@naXa try text-danger. Aqui está uma lista completa de cores.
NaXa

24

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>

2
As versões mais recentes (4.0.3 no momento da este comentário) estão disponíveis em bootstrapcdn.com/#fontawesome_tab
wizulus

7

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

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

7

Para o bootstrap 3.0, isso funcionou para mim:

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

3

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.


3
Isso icon-whitefuncionou para mim com o Bootstrap 2. A pergunta feita pelo azul, mas saber que há uma única classe de branco parece útil.
smholloway


2

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>

2

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>

2

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


1

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>  

insira a descrição da imagem aqui


0

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);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.