Posso adicionar cores aos ícones de auto-inicialização apenas usando CSS?

159

A inicialização do Twitter usa o Icons by Glyphicons . Eles são " available in dark gray and white" por padrão:

É possível usar alguns truques de CSS para alterar as cores dos ícones? Eu estava esperando por algum outro brilho css3 que evitasse ter que ter uma imagem de ícone definida para cada cor.

Sei que você pode alterar a cor de fundo do elemento envolvente ( ), mas estou falando da cor do primeiro plano do ícone. Eu acho que seria possível inverter a transparência na imagem do ícone e depois definir a cor do plano de fundo.

Então, posso adicionar cores aos ícones de auto-inicialização apenas usando CSS?

css twitter-bootstrap sprite css-sprites cwd
fonte

Eu acho que não ... Mas você provavelmente poderia fazer isso com javascript e um elemento de tela.

bfavaretto 11/09/12

@bfavaretto - você pode elaborar? você quer dizer criar código / coordenadas para desenhar cada um dos ícones ou usar a imagem png existente de alguma forma?

Cwd

1

Desculpe, não tenho experiência suficiente com o elemento canvas para sugerir o código, mas sei que você pode manipular os pixels individualmente com uma tela.

bfavaretto 11/09/12

189

Sim, se você usar o Font Awesome com o Bootstrap! Os ícones são um pouco diferentes, mas há mais deles, eles ficam ótimos em qualquer tamanho e você pode alterar as cores deles.

Basicamente, os ícones são fontes e você pode alterar a cor deles apenas com a propriedade CSS color. As instruções de integração estão na parte inferior da página no link fornecido.

Edit: Ícones do Bootstrap 3.0.0 agora são fontes!

Como outras pessoas também mencionaram com o lançamento do Bootstrap 3.0.0, os glifos de ícone padrão agora são fontes como Font Awesome, e a cor pode ser alterada simplesmente alterando a colorpropriedade CSS. A alteração do tamanho pode ser feita via font-sizepropriedade.

hajpoj
fonte

9

Ahh, esperto! Não se esqueça de definir cursor: default;para que os usuários não vejam a barra I. Além disso, confira FF Chartwell, uma fonte realmente inteligente: tktype.com/chartwell.php

Dai

4

Quando você Ipassa o mouse sobre o texto (como em um processador de texto), seu cursor se parece com um caractere " " maiúsculo demais . Em CSS, é referido como cursor: text;. Também é conhecido como "I-beam".

Dai

38

Com a versão mais recente do Bootstrap RC 3, alterar a cor dos ícones é tão simples quanto adicionar uma classe com a cor desejada e adicioná-la ao intervalo.

Cor preta padrão:

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

se tornaria

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

CSS

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

Lista de Glyphicons do Bootstrap 3

fseminario
fonte

17

Como os glyphicons agora são fontes, é possível usar as classes contextuais para aplicar a cor apropriada aos ícones.

Por exemplo:  adicionar text-infoao css tornará o ícone na cor azul de informações.

truncie
fonte

Obrigado estava procurando uma maneira de aplicar as classes contextuais. Qualquer um dos texto- * aulas contextuais vai funcionar

Dustin Hodges

14

Outra maneira possível de ter ícones de inicialização em uma cor diferente é criar um novo .png na cor desejada (por exemplo, magenta) e salvá-lo como / path-to-bootstrap-css / img / glyphicons-halflings- magenta .png

Em sua variables.less achado

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

e adicione esta linha

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

Em seus sprites.less adicione

/* 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 use-o assim:

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

Espero que ajude alguém.

Sepp Ludger
fonte

5

só queria reiterarI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

cwd

Não pode ser feito apenas via CSS, também compatível com vários navegadores. Normalmente, as pessoas precisam de um esquema de cores com ícones relacionados - então eu diria que até 5 conjuntos de cores não são um grande desafio.

foxybagga

@seppludger Como você cria um novo sprite halfling colorido? Você conseguiu fazer isso? Não consigo alterar as cores se as carregar em qualquer editor de gráficos.

Norman

7

Trabalho rápido e sujo em torno do qual foi feito por mim, não para colorir o ícone, mas ao redor dele com um rótulo ou crachá na cor desejada;

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

frbl
fonte

Sua resposta foi útil, + 1.Queria usar o ícone de edição e colocar a cor amarela. Pode me dizer como fazer isso?

Bem, você pode simplesmente mudar o ícone ok para outra coisa; por exemplo, icon-white"> . Por exemplo: . É melhor ir para o novo bootstrap imo ..

frbl 27/01

6

Os Glyphicons do Bootstrap são fontes. Isso significa que pode ser alterado como qualquer outro texto através do estilo CSS.

CSS:

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

HTML:

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

Exemplo:

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

Assista ao curso Como instalar e executar o Bootstrap 3, de Jen Kramer, ou assista à lição individual sobre Substituir o CSS principal com estilos personalizados .

Eugene
fonte

4

Isso tudo é um pouco indireto ..

Eu usei os glifos como este

  </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 para afetar a cor, incluí um pouco de css na cabeça assim

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

Voila, polegares verdes e vermelhos.

Monstros X
fonte

4

Também funciona com a tag style:

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

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

insira a descrição da imagem aqui

joan16v
fonte

3

Na verdade, é muito fácil:

Apenas use:

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

Por exemplo:

.icon-compass{
color: #C30;}

É isso aí.

Aniruddh Dixit
fonte

3

Use o mask-image propriedade, mas é um pouco complicado. É demonstrado no blog do Safari aqui .

Também é descrito em profundidade aqui .

Basicamente, você criaria uma caixa CSS, digamos background-image: gradient(foo); e depois aplicaria uma máscara de imagem com base nessas imagens PNG.

Você economizaria tempo de desenvolvimento criando imagens individuais no Photoshop, mas não acho que economizaria muita largura de banda, a menos que você exiba as imagens em uma ampla variedade de cores. Pessoalmente, eu não o usaria porque você precisa ajustar sua marcação para usar a técnica de maneira eficaz, mas sou membro da escola de pensamento "pureza é imperativa".

Dai
fonte

1

Lembre-se de que o suporte à mask-imagepropriedade não é tão bom .

Scott Bartell

1

A resposta aceita (usando a fonte awesome) é a correta. Mas como eu só queria que a variante vermelha aparecesse nos erros de validação, acabei usando um pacote de complemento, gentilmente oferecido neste site .

Apenas editei os caminhos de URL nos arquivos css, pois são absolutos (comece com /) e prefiro ser relativo. Como isso:

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

mppfiles
fonte

Finalmente, aquele compatível com as versões antigas do Bootstrap

Dmitry Ginzburg

1

Você também pode alterar a cor globalmente

ie

 .glyphicon {
       color: #008cba; 
   }

Desenvolvedor
fonte

1

Basta usar os GLYPHICONS e você poderá alterar a cor apenas configurando o CSS:

#myglyphcustom {
    color:#F00;
}

Valter Lorran
fonte

0

Eu pensei que eu poderia adicionar este trecho para este post antigo. Foi o que eu fiz no passado, antes dos ícones serem fontes:

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

Isso é muito semelhante à resposta sorrateira de @frbl, mas não usa outra imagem. Em vez disso, isso define a cor de fundo do elemento whitee usa a propriedade CSS border-radiuspara tornar todo o elemento "arredondado". Se você notou, o valor de border-radius(7,5px) é exatamente metade do valor da propriedade widthe height(ambos de 15px, tornando o ícone quadrado), tornando o elemento circular.

WebWanderer
fonte

Posso adicionar cores aos ícones de auto-inicialização apenas usando CSS?

Respostas: