Mudar a cor dos glifícons para azul em alguns-mas não em todos os lugares usando Bootstrap 2
estou a usar a estrutura Bootstrap para a minha IU. Quero mudar a cor dos meus glifícons para azul, mas não em todos os lugares. Em alguns lugares, ele deve usar a cor padrão.
Já me referi a estes dois links, mas não encontro nada de útil.- Posso adicionar cor aos ícones de bootstrap apenas com o CSS?
- Como posso mudar os glifícons do Bootstrap 3 para branco?
Nota: estou a utilizar Bootstrap 2.3.2 .
11 answers
O ícone irá adoptar a cor a partir do valor da propriedade css do seu pai.
Pode adicionar isto directamente 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 para ele 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;
}
Basta aplicar Bootstrap 3
text-success classe no ícone:
<span class="glyphicon glyphicon-play text-success">начал работу</span>
Há mais cores: documentação do Bootstrap: classes auxiliares
(O azul também está presente)
<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 irá rodar em cor marrom. Ele 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>
Para o bootstrap 3.0, isto funcionou comigo:
.myclass .glyphicon {color:blue !important;}
Você pode fazer isso também, espero que ajude
<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
Sim, você pode definir os ícones para a cor branca. foi assim que funcionou comigo.
Bootstrap <3
HTML
<i class="icon-ok icon-white"></i>
Criei uma biblioteca de cores alternativa para o bootstrap 2.3.2 está disponível e é simples de usar para qualquer pessoa interessada em mais cores para a antiga biblioteca glificons.
Se for apenas um ícone de bootstrap. Note que os ícones estão sob texto ou melhor tipografia. Basta adicionar a classe de cor do texto assim. E. g texto-primário, texto-info e assim por diante para a classe de ícones:
<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 deixou cair o Suporte de glificon
Deixou cair o tipo de letra dos ícones Glifícons. Se precisar de ícones, algumas opções são:
A versão a montante de Glifícons
Fonte: https://v4-alpha.getbootstrap.com/migration/#components
Se estiver a usar o Bootstrap >= v4.0 ou mais recente, poderá usar as classes de estilo existentes do bootstrap, tais como: text-success,text-warning etc.
Por exemplo, se estiver a usar 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>
Os Glifícons são removidos em 4.0, eu recomendo Font-awesome 4 ou mais recente:)
Todas as respostas anteriores estão correctas, mas aqui está uma forma simples e rápida se só precisar de um ícone num local para mudar a sua cor:
<p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>
