Como estilizar a cor, o tamanho e a sombra dos ícones dos ícones Awesome Font

Respostas:

466

Como são simplesmente fontes, você poderá denominá-las como fontes:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
David diz para restabelecer Monica
fonte
4
@ David Thomas: Essa é uma boa solução. Obrigado por postar isso. No entanto, eu ainda estou confuso por que fonte incrível às vezes mostra ícones em branco e outras vezes em preto. QUAL É O TRUQUE? Como GirlCanCode2 apontou, os exemplos no site da FA mostram ícones e texto em preto e branco. . . examinando os elementos no Firebug, no entanto, o CSS para ícones específicos (por exemplo, icon-info) é escrito [over] para ser branco. É isso mesmo que precisamos fazer? Nenhuma opção de ícone branco como no bootstrap.css?
Ace
11
para mudar a cor, verifique esta no SO, esperança ajuda alguém
shaijut
@ Eu sei que isso é antigo e você já deve ter aprendido isso agora, mas também para outros que têm a pergunta de que pode querer examinar a especificidade aqui e também aqui . A outra coisa a saber é a cascata CSS; por exemplo, estilos e folhas de estilo que vêm depois de outros são aplicados, a menos que seus seletores de regras de estilo sejam menos específicos (como na especificidade). Então, minha prática favorita é combinar pelo menos a especificidade e colocar o estilo depois de substituir.
John
158

Você também pode adicionar estilo embutido:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>
dandrews
fonte
7
Apesar dos votos elitistas, esta resposta funciona bem. Como a fonte awesome é uma fonte, ela responde a estilos e classes que afetam o texto.
AaronLS
16
@NightOwl Também é uma prática recomendada usar a minificação, o empacotamento e o cache desses recursos. Nenhuma das respostas aqui demonstra essas coisas, e para tentar aplicar as melhores práticas a serem seguidas no contexto de uma resposta isolada é a OMI elitista. Qualquer pessoa que entenda CSS deve ser capaz de pegar esse estilo e movê-lo para uma classe CSS.
AaronLS
4
@NightOwl Até a resposta mais votada é péssima em termos de melhores práticas. Você não deve criar estilos em arquivos CSS compartilhados que façam referência a elementos por #id, pois apenas um elemento poderá se inscrever nesse estilo em cada página. Se eu o diminuísse por esse motivo, não seria bem elitista? Ambos os respondentes fizeram um esforço efetivo para fornecer informações úteis ao solicitante, e não creio que devam ser rebaixados quando a resposta for realmente eficaz.
AaronLS
31
Se alguém quiser complementar a resposta com um comentário que indique que geralmente é uma prática recomendada não usar estilos em linha, isso seria apropriado. Uma resposta eficaz e informativa não deve ser rebaixada em relação a essas trivialidades quando alguém poderia simplesmente melhorar o valor existente da resposta adicionando um comentário.
21413 AaronLS
11
Para mim, não faz sentido colocar uma diretiva css em cores simples em sua própria classe e agrupá-la com seus recursos css. O que você vai fazer? class='icon-ok-sign my-red-class'? ou class='icon-ok-sign-red'? Isso torna menos legível e adiciona um nível inútil de complexidade.
precisa
114

Se você estiver usando o Bootstrap ao mesmo tempo, poderá usar:

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

De outra forma:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
Qian Chen
fonte
11
Certamente a solução para a questão não envolve o uso de bootstrap
JG Estiot
11
Pode não exigir bootstrap, mas foi assim que encontrei esta pergunta. Graças à Elgs!
Will Lovett
11
Você pode ver na captura de tela que eles já estão usando o bootstrap. Faria sentido continuar usando-o para manter a mesma paleta de cores e não o código duplicado.
Simon Luijk
sutil, mas importante: o sucesso do texto é a cor do texto, não a cor do botão do btn-success. Portanto, se você deseja que um ícone pareça um "botão plano", o sucesso do texto será um pouco diferente. Acho que este é mais aparente no texto de alerta, já que é um amarelo feio ao contrário de um laranja muito visível
Josh Petitt
44

Parece que a cor do ícone FontAwesome responde a informações de texto, erros de texto etc.

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
user1695595
fonte
8
Para o Bootstrap, <i class = "fa fa-warning text-danger"> </i>
Mastro 28/07
Esta é provavelmente a melhor resposta desta página, pelo menos para mim, já que eu já estou usando o Bootstrap e isso se encaixa nesse paradigma.
Jake Toronto
17

arquivo inyour.css:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

arquivo inyour.html:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
gingin
fonte
13

Existe uma maneira realmente simples de mudar a cor dos ícones de Fontes impressionantes. 

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>
Expandir snippet

Você pode alterar o código hexadecimal de acordo com sua preferência. NOTA: A cor do texto também mudará a cor do ícone, a menos que haja uma style="color:#00cc6a"dentro da itag.

Calum Childs
fonte
9

Usando a adição do FA 4.4.0

.text-danger
    color: #d9534f

para o documento css e, em seguida, usando 

 <i class="fa fa-ban text-danger"></i>

muda a cor para vermelho. Você pode definir o seu próprio para qualquer cor.

Steve Gutierrez
fonte
9 
For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}
arif imtiaz
fonte
8

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

Aqui eu defini um estilo global no meu CSS, onde main-color é uma classe; no meu caso, é um tom azul claro. Acho que o uso de estilos embutidos no Icons with Font Awesome funciona bem, especialmente no caso em que você nomeia suas cores semanticamente, por exemplo, nav-color, se quiser uma cor separada para isso, etc.

Neste exemplo em seu site, e como também escrevi no meu exemplo, a versão mais recente do Font Awesome alterou ligeiramente a sintaxe do ajuste do tamanho. Antes era:

icon-xxlarge

onde agora eu tenho que usar:

icon-3x

Obviamente, tudo isso depende da versão do Font Awesome que você instalou no seu ambiente. Espero que isto ajude.

kinghenry14
fonte
7

No FontAwesome 4.0, as classes mudam para 'fa-2x', 'fa-3x'.

angelokh
fonte
7

Simplesmente você pode definir uma classe no seu arquivo css e colocá-la em cascata no arquivo html, como 

<i class="fa fa-plus fa-lg green"></i>

agora escreva em css 

.green{ color:green}
gdmanandamohon
fonte
6

Apenas segmente o nome da classe predefinida impressionante da fonte

em ex:

HTML

<i class="fa fa-facebook"></i>

CSS

i.fa {
    color: red;
    font-size: 30px;
}
Jonca33
fonte
5

Consulte o link http://www.w3schools.com/icons/fontawesome_icons_intro.asp

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
Brandon Yang
fonte
4

Eu tive o mesmo problema quando tentei usar os ícones diretamente do BootstrapCDN (a maneira mais fácil). Depois, baixei o arquivo CSS e copiei para a pasta CSS do meu site, o arquivo CSS (descrito na "maneira fácil" na documentação impressionante de fontes), e tudo começou a funcionar como deveria.

Thanushka
fonte
3

Crédito: Posso mudar a cor da cor do ícone do Font Awesome?

(esta resposta baseia -se nessa resposta)

(para o ícone de marcador, por exemplo :)

arquivo inyour.css:

.icon-bookmark.icon-white {
    color: white;
}

arquivo inyour.html:

<div class="icon-bookmark icon-white"></div>
therobyouknow
fonte
3

Embrulhe a tag i em p ou span, e você poderá usar a classe bootstrap css

<p class="text-success"><i class="fa fa-check"></i></p>
etlds
fonte
2

Para a versão do Font Awesome 5 SVG , use

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
czLukasss
fonte
1

Como foi apontado, os ícones impressionantes da fonte são texto, consequentemente você o estiliza usando os atributos CSS apropriados. Por exemplo:

.fa-twitter-square {
    font-size: 15px;
    color: red;
}

Se, como acontece bastante comigo, o tamanho do ícone não mudar, adicione "! Important" ao atributo tamanho da fonte.

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}
gmartinss
fonte
1

Para ícones de dimensionamento

Nossas estruturas Web Fonts + CSS e SVG + JS incluem alguns controles básicos para dimensionar ícones no contexto da interface do usuário da sua página.

você pode usar como

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

TarangP
fonte
0

Altere dinamicamente as propriedades css dos ícones .fa-xxx:

<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a>
</li>
<script>
  $(document).ready(function(){
   $('li.nws').on("focusin", function(){
    $('.fa-bolt').addClass('lightning');
   });
 });
</script>

<style>
.lightning{ /*do something cool like shutter*/}
</style>
yardpenalty.com
fonte
0 
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
Dan Alboteanu
fonte
0

Eu não recomendaria que você usasse um estilo incrível de fonte, como o fa-5x etc; por medo de que eles possam alterá-lo e você teria que continuar perseguindo o código do aplicativo para encontrar o padrão mais recente. Você simplesmente evita isso, dando a cada classe impressionante de fonte que deseja estilizar uniformemente a mesma classe:

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

Aqui a classe é fa-sabi-social-icons

Em seu CSS, você pode estilizar as fontes usando as mesmas regras de CSS com as quais você estilizaria uma fonte normal. por exemplo

.fa-sabi-social-icons {
     color: //your color;
     font-size: // your font-size in px, em or %;
     text-shadow: 2px 2px #FF0000;
}

Isso deve dar estilo às suas fontes impressionantes

kboul
fonte