Comment styliser la couleur de l'icône, la taille, et l'ombre des icônes de police impressionnant

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

par exemple, Font Awesome site montrera quelques icônes en blanc et certains en rouge, mais ne montrera pas le CSS pour la façon de les styliser de cette façon ...

enter image description here

296
demandé sur gbjbaanb 2012-09-05 02:44:32

21 réponses

étant donné qu'il s'agit simplement de polices de caractères, vous devriez être en mesure de les présenter comme des polices de caractères: 

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
406
répondu David Thomas 2012-09-04 22:50:45

vous pouvez aussi juste ajouter style inline: 

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

<i class="icon-warning-sign" style="color:red"></i>
117
répondu dandrews 2013-03-11 19:03:20

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>
82
répondu Elgs Qian Chen 2014-10-21 18:05:45

ressemble à L'icône FontAwesome couleur répond à text-info, text-error, etc. 

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
41
répondu user1695595 2012-09-27 01:41:52

inyour.fichier css: 

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

inyour.fichier html: 

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
17
répondu gingin 2013-09-13 16:16:57

il y a une façon très simple de changer la couleur des icônes de police impressionnant. 

<!-- 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 changer le code hexadécimal à votre préférence. NOTE: la couleur du texte changera également la couleur de l'icône à moins qu'il n'y ait un style="color:#00cc6a" dans la balise i .

10
répondu Calum Childs 2017-09-07 17:02:18

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ù main-color est une classe, dans mon cas c'est une teinte bleu clair. Je trouve que l'utilisation de styles en ligne sur les icônes Avec police impressionnant fonctionne bien, esp dans le cas où vous nommer vos couleurs sémantiquement, c.-à-d. nav-couleur si vous voulez une couleur séparée pour cela, etc.

Dans cet exemple sur leur site, et comment J'ai écrit dans mon exemple aussi bien, la nouvelle version de Font Awesome a changé la syntaxe légèrement d'ajustement de la taille.Avant il était: 

icon-xxlarge

où maintenant je dois utiliser: 

icon-3x

bien sûr, tout dépend de quelle version de Font Awesome vous avez installé sur votre environnement. Espérons que cette aide.

8
répondu kinghenry14 2013-07-09 13:25:19

utilisant FA 4.4.0 ajout de 

.text-danger
    color: #d9534f

au document css et en utilisant ensuite 

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

la couleur rouge. Vous pouvez définir votre propre pour n'importe quelle couleur.

8
répondu Steve Gutierrez 2015-09-12 22:33:57

Dans FontAwesome 4.0, les classes en "fa-2x', 'fa-3x'.

7
répondu angelokh 2013-12-16 18:59:44

, vous pouvez définir une classe dans votre fichier css et cascade en fichier html comme 

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

notez maintenant dans css 

.green{ color:green}
6
répondu gdmanandamohon 2017-01-10 06:33:12

s'il vous Plaît consulter le 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
répondu Brandon Yang 2016-10-28 06:50:34

j'ai eu le même problème quand j'ai essayé d'utiliser les icônes directement à partir de BootstrapCDN (la manière la plus facile). Puis j'ai téléchargé le fichier CSS et je l'ai copié dans le dossier CSS de mon site, le fichier CSS (décrit sous la rubrique "easy way" dans la documentation font awesome), et tout a commencé à fonctionner comme il se doit.

4
répondu Thanushka 2013-07-26 02:21:14

crédit: puis-je changer la couleur de L'icône de Font Awesome?

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

(pour l'icône de marque-page, par exemple:)

inyour.fichier css: 

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

inyour.fichier html: 

<div class="icon-bookmark icon-white"></div>
3
répondu therobyouknow 2017-05-23 12:26:35

Seulement la cible de la police génial classe prédéfinie nom

ex:

HTML 

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

CSS 

i.fa {
    color: red;
    font-size: 30px;
}
3
répondu tonkihonks13 2018-02-02 16:41:31

envelopper l'étiquette i dans p ou span, alors vous pouvez utiliser bootstrap classe css 

<p class="text-success"><i class="fa fa-check"></i></p>
2
répondu etlds 2016-04-19 03:06:09

For Font Awesome 5 SVG version, use 

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
2
répondu czLukasss 2018-04-09 19:53:11

change dynamiquement les propriétés css de .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
répondu yardpenalty 2016-08-29 05:02:26 
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
0
répondu Dan Alboteanu 2017-03-13 18:55:30

comme il a été souligné, les icônes font awesome sont du texte, par conséquent vous le style en utilisant les attributs CSS appropriés. Par exemple: 

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

si, comme il m'arrive souvent, la taille de l'icône ne change pas du tout, ajouter"!important" de la police-taille de l'attribut. 

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}
0
répondu gmartinss 2017-08-09 17:20:08

Je ne vous conseillerais pas d'utiliser la police intégrée-style impressionnant comme le fa-5x etc; de peur qu'ils puissent le changer et vous auriez à garder la chaîne de votre code d'application pour répondre à la dernière norme. Vous évitez simplement cela en donnant à chaque police-classe impressionnant que vous voulez style uniformément la même classe dire: 

<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-icônes

puis dans votre css vous pouvez le style les polices en utilisant le même css règles avec lesquelles vous voulez utiliser une police normale. E. g 

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

}

qui devrait obtenir votre police-impressionnant polices de style

0
répondu Lawrence Oputa 2017-12-11 16:37:46

pour la 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 L'Ombre : .fa-linkedin-carré{ texte-ombre: 3px 6px #272634; } "

0
répondu codeinnovation 2018-07-25 21:45:15