web-dev-qa-db-fra.com

Comment styliser la couleur, la taille et l'ombre des icônes Font Awesome Icons

Comment puis-je styler la couleur, la taille et l'ombre des icônes des icônes Icons de Font Awesome?

Par exemple, site de Font Awesome affichera des icônes en blanc et d'autres en rouge, mais pas la CSS pour savoir comment les styler de cette façon ...

enter image description here

csstwitter-bootstrapiconsstylesfont-awesome-4
310
Elias7

Étant donné que ce sont simplement des polices, vous devriez pouvoir les définir comme des polices:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
421
David Thomas

Vous pouvez aussi simplement ajouter un style inline:

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

<i class="icon-warning-sign" style="color:red"></i>
133
dandrews

Si vous utilisez Bootstrap en même temps, vous pouvez utiliser:

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

Autrement:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
94
Elgs Qian Chen

On dirait que la couleur de l'icône FontAwesome répond aux informations de texte, aux erreurs de texte, etc.

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
42
user1695595

dans votre fichier.css:

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

dans votre fichier.html:

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

Il existe un moyen très simple de changer la couleur des icônes Font Awesome. 

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

Vous pouvez modifier le code hexadécimal selon vos préférences. REMARQUE: La couleur du texte modifiera également la couleur de l'icône sauf s'il existe un style="color:#00cc6a" dans la balise i.

10
Calum Childs

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

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

Ici, j'ai défini un style global dans mon CSS où la couleur principale est une classe, dans mon cas, il s'agit d'une teinte bleu clair. Je trouve que l’utilisation de styles en ligne sur les icônes avec Font Awesome fonctionne bien, particulièrement dans le cas où vous nommez vos couleurs sémantiquement, c’est-à-dire nav-color si vous voulez une couleur séparée pour cela, etc.

Dans cet exemple sur leur site Web, et la façon dont j'ai écrit dans mon exemple également, la dernière version de Font Awesome a légèrement modifié la syntaxe d'ajustement de la taille. Avant cela, c'était:

icon-xxlarge

où maintenant je dois utiliser:

icon-3x

Bien entendu, tout dépend de la version de Font Awesome que vous avez installée sur votre environnement. J'espère que cela t'aides.

8
kinghenry14

Utilisation de FA 4.4.0 pour ajouter

.text-danger
    color: #d9534f

au document css puis en utilisant 

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

change la couleur en rouge. Vous pouvez définir le vôtre pour n'importe quelle couleur.

8
Steve Gutierrez

Dans FontAwesome 4.0, les classes sont modifiées en "fa-2x", "fa-3x".

7
angelokh

Vous pouvez simplement définir une classe dans votre fichier css et la transférer en cascade dans un fichier html, comme 

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

maintenant écrivez en css 

.green{ color:green}
6
gdmanandamohon

Veuillez vous référer au lien 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>
5
Brandon Yang

Il suffit de cibler un nom de classe prédéfini, qui est génial 

en ex:

HTML

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

CSS

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

Pour Taille: fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

Pour Couleur: <i class="fa fa-link fa-lg" aria- hidden="true"style="color:indianred"></i> Pour Ombre: .fa-linkedin-square { text-shadow: 3px 6px # 272634; } ``

4
arif imtiaz

J'ai eu le même problème lorsque j'ai essayé d'utiliser les icônes directement à partir de BootstrapCDN (le moyen le plus simple). Ensuite, j'ai téléchargé le fichier CSS et l'ai copié dans le dossier CSS de mon site, le fichier CSS (décrit sous la rubrique «Documentation facile» dans la police), et tout a commencé à fonctionner correctement.

4
Thanushka

Crédit: Puis-je changer la couleur de la couleur de l'icône de Font Awesome?

(cette réponse construit sur cette réponse)

(pour l'icône de signet, par exemple :)

fichier inyour.css:

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

fichier inyour.html:

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

Pour Font Awesome 5 SVG version, utilisez 

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

Enveloppez la balise i dans p ou span, vous pouvez alors utiliser la classe bootstrap css

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

Comme il a été souligné, les icônes Police Awesome sont du texte. Par conséquent, vous les appelez à l'aide des attributs CSS appropriés. Par exemple:

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

Si, comme cela m'est souvent arrivé, la taille de l'icône ne change pas du tout, ajoutez "! Important" à l'attribut police-size.

.fa-Twitter-square {
    font-size: 15px !important;
    color: red;
}
0
gmartinss

Modifiez dynamiquement les propriétés css des icônes .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>
0
yardpenalty

Je ne vous conseillerais pas d'utiliser un style de police génial comme le fa-5x, etc. de peur qu'ils ne le modifient et que vous deviez continuer à modifier le code de votre application pour respecter le dernier standard. Vous évitez simplement cela en donnant à chaque classe de polices que vous souhaitez styler uniformément la même classe, par exemple:

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

Ici la classe est fa-sabi-social-icons

Ensuite, dans votre css, vous pouvez attribuer un style aux polices en utilisant les mêmes règles css que celles utilisées pour une police normale avec .

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

}

Cela devrait donner à vos polices des polices géniales

0
Lawrence Oputa
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
0
Dan Alboteanu

Pour les icônes de dimensionnement

Nos infrastructures Web Fonts + CSS et SVG + JS incluent des commandes de base permettant de redimensionner les icônes dans le contexte de l'interface utilisateur de votre page.

vous pouvez utiliser comme

<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

0
TarangP