Como eu poderia estilizar a cor, tamanho e sombra dos ícones dos ícones do Font Awesome ?
Por exemplo, o site do Font Awesome mostrará alguns ícones em branco e outros em vermelho, mas não mostrará CSS
como estilizá-los dessa maneira ...
Como eu poderia estilizar a cor, tamanho e sombra dos ícones dos ícones do Font Awesome ?
Por exemplo, o site do Font Awesome mostrará alguns ícones em branco e outros em vermelho, mas não mostrará CSS
como estilizá-los dessa maneira ...
Respostas:
Como são simplesmente fontes, você poderá denominá-las como fontes:
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
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>
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.
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>
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>
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>
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 i
tag.
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.
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;}
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.
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}
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>
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.
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>
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;
}
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
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>
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
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