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

Réponses:

466

Étant donné qu'il s'agit simplement de polices, vous devriez pouvoir les styliser en tant que polices:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
David dit de réintégrer Monica
la source
4
@David Thomas: C'est une bonne solution. Merci d'avoir posté ça. Cependant, je suis TOUJOURS perplexe pourquoi font-awesome affiche parfois des icônes en blanc et parfois en noir. QUEL EST LE TRUC? Comme GirlCanCode2 l'a souligné, les exemples sur le site Web de la FA montrent à la fois des icônes et du texte en noir et blanc. . . en examinant les éléments dans Firebug, cependant, le CSS pour des icônes spécifiques (par exemple, icon-info) est [écrasé] écrit en blanc. Est-ce vraiment ce que nous devons faire? Pas d'option icône blanche comme dans bootstrap.css?
Ace
1
pour changer la couleur, vérifiez cela dans SO, l'espoir aide quelqu'un
shaijut
@Ace, je sais que c'est vieux et vous l'avez peut-être déjà appris, mais pour d'autres aussi qui ont la question, vous voudrez peut-être examiner la spécificité ici et aussi ici . L'autre chose à savoir est la cascade CSS; par exemple, les styles et les feuilles de style qui viennent après les autres sont appliqués à la place, sauf si leurs sélecteurs de règles de style sont moins spécifiques (comme dans la spécificité). Donc, ma pratique préférée consiste à au moins correspondre à la spécificité et à mettre le style après pour remplacer.
John
158

Vous pouvez également simplement ajouter un style en ligne:

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

<i class="icon-warning-sign" style="color:red"></i>
dandrews
la source
7
Malgré les votes élitistes, cette réponse fonctionne très bien. Parce que la police impressionnante est une police, elle répond aux styles et aux classes qui affectent le texte.
AaronLS
16
@NightOwl Il est également recommandé d'utiliser la minification, le regroupement et la mise en cache de ces ressources. Aucune des réponses ici ne démontre aucune de ces choses, et pour essayer d'appliquer les meilleures pratiques à suivre dans le contexte d'une réponse isolée, c'est l'OMI élitiste. Quiconque comprend CSS devrait pouvoir prendre ce style et le déplacer dans une classe CSS.
AaronLS
4
@NightOwl Même la réponse la plus votée est assez terrible en termes de meilleures pratiques. Vous ne devriez pas créer de styles dans des fichiers CSS partagés qui référencent des éléments par #id, car un seul élément serait en mesure de s'abonner à ce style sur chaque page. Si je l'ai rétrogradé pour cette raison, ne serais-je pas assez élitiste? Les deux répondeurs ont fait un effort efficace pour fournir des informations utiles au demandeur, et je ne pense pas qu'ils devraient être rétrogradés lorsque leur réponse est effectivement efficace.
AaronLS
31
Si quelqu'un veut compléter la réponse avec un commentaire qui indique qu'il est généralement préférable de ne pas utiliser de styles en ligne, alors ce serait approprié. Une réponse efficace et informative ne devrait pas être minimisée par rapport à de telles trivialités lorsque quelqu'un aurait pu simplement améliorer la valeur existante de la réponse en ajoutant un commentaire.
AaronLS
1
Pour moi, cela n'a aucun sens de placer une simple directive CSS couleur dans sa propre classe et de la regrouper avec vos ressources CSS. Que vas-tu faire? class='icon-ok-sign my-red-class'? ou class='icon-ok-sign-red'? Cela le rend moins lisible et ajoute un niveau de complexité inutile.
nurettin
114

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>
Qian Chen
la source
1
Certes, la solution à la question n'implique pas l'utilisation de bootstrap
JG Estiot
1
Cela peut ne pas nécessiter de bootstrap, mais c'est comme ça que j'ai trouvé cette question. Merci Elgs!
Will Lovett
1
Vous pouvez voir sur la capture d'écran qu'ils utilisent déjà le bootstrap. Il serait judicieux de continuer à l'utiliser pour conserver la même palette de couleurs et non pour dupliquer le code.
Simon Luijk
subtil mais important: le succès du texte est la couleur du texte, pas la couleur de la face du bouton pour le succès btn. Donc, si vous voulez qu'une icône ressemble à un "bouton plat", la réussite du texte sera légèrement différente. Je trouve que cela est plus apparent dans l'avertissement textuel, car il s'agit d'un jaune laid par opposition à une orange très visible
Josh Petitt
44

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>
user1695595
la source
8
Pour Bootstrap, <i class = "fa fa-warning text-danger"> </i>
Mastro
C'est probablement la meilleure réponse sur cette page, du moins pour moi, car j'utilise déjà Bootstrap et cela correspond à ce paradigme.
Jake Toronto
17

fichier inyour.css:

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

fichier inyour.html:

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

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>
Développer l'extrait

Vous pouvez modifier le code hexadécimal selon vos préférences. REMARQUE: la couleur du texte changera également la couleur de l'icône, sauf s'il y en a une style="color:#00cc6a"dans la ibalise.

Calum Childs
la source
9

Utilisation de FA 4.4.0 en ajoutant

.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 la vôtre pour n'importe quelle couleur.

Steve Gutierrez
la source
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
la source
8

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 Font Awesome fonctionne bien, surtout dans le cas où vous nommez vos couleurs sémantiquement, c'est-à-dire nav-color si vous voulez une couleur distincte pour cela, etc.

Dans cet exemple sur leur site Web, et comment j'ai également écrit dans mon exemple, la dernière version de Font Awesome a légèrement modifié la syntaxe de l'ajustement de la taille.

icon-xxlarge

où maintenant je dois utiliser:

icon-3x

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

kinghenry14
la source
7

Dans FontAwesome 4.0, les classes changent en «fa-2x», «fa-3x».

angelokh
la source
7

Vous pouvez simplement définir une classe dans votre fichier css et la cascader en fichier html comme 

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

maintenant écrire en css 

.green{ color:green}
gdmanandamohon
la source
6

Ciblez simplement un nom de classe prédéfini génial pour les polices

en ex:

HTML

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

CSS

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

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>
Brandon Yang
la source
4

J'ai eu le même problème lorsque j'ai essayé d'utiliser les icônes directement à partir de BootstrapCDN (la manière la 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 «méthode simple» dans la documentation impressionnante des polices), et tout a commencé à fonctionner comme il se doit.

Thanushka
la source
3

Enveloppez la balise i dans p ou span, puis vous pouvez utiliser la classe CSS bootstrap

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

Pour la version SVG de Font Awesome 5 , utilisez

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

Comme cela a été souligné, les icônes géniales des polices sont du texte, par conséquent vous le stylisez en utilisant les attributs CSS appropriés. Par exemple:

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

Si, comme cela m'arrive un peu, la taille de l'icône ne change pas du tout, ajoutez "! Important" à l'attribut font-size.

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

Pour redimensionner les icônes

Nos frameworks Web Fonts + CSS et SVG + JS incluent des contrôles de base pour le dimensionnement des 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

TarangP
la source
0

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>
yardpenalty.com
la source
0 
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
Dan Alboteanu
la source
0

Je ne vous conseillerais pas d'utiliser un style de police génial comme le fa-5x, etc. de peur qu'ils ne le changent et que vous deviez continuer à enchaîner votre code d'application pour respecter la dernière norme. Vous évitez simplement cela en donnant à chaque classe impressionnante de polices que vous souhaitez styliser uniformément la même 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>

Ici, la classe est fa-sabi-social-icons

Ensuite, dans votre CSS, vous pouvez styliser les polices en utilisant les mêmes règles CSS que celles que vous utiliseriez avec une police normale. par exemple

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

Cela devrait donner un style à vos polices impressionnantes

kboul
la source