Comment icône de style de la couleur, la taille, et l'ombre de la Police Impressionnant Icônes

Comment ai-je pu le style, la couleur, la taille et l'ombre des icônes de la Police Impressionnant de Les icônes?

La Police, par exemple Impressionnant de l' site montrera quelques icônes en blanc et quelques en rouge, mais ne fait pas apparaître le CSS pour la façon dont le style de cette façon ...

InformationsquelleAutor Elias7 | 2012-09-04

433

Étant donné qu'ils sont tout simplement les polices, alors vous devriez être en mesure de style comme des polices:
```
#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
```
- Vous pouvez le tester avec les exemples de l' css-tricks.com/examples/IconFont
- Thomas: C'est une bonne solution. Merci pour l'afficher. Cependant, je suis TOUJOURS perplexe pourquoi font-awesome présente parfois des icônes en blanc et parfois en noir. QUEL EST LE TRUC? Comme GirlCanCode2 souligné, les exemples sur la FA site web de montrer à la fois en noir et blanc icônes & texte . . . examiner les éléments dans Firebug, cependant, le CSS pour des icônes spécifiques (par exemple, l'icône de l'info) devient [de plus], écrit à être blanc. Est-ce vraiment ce que nous avons à faire? Pas d'icône-blanc comme dans le bootstrap.css?
- pour modifier la couleur, la case this dans l'affirmative, l'espoir aide à quelqu'un
InformationsquelleAutor David Thomas
139

Vous pouvez aussi ajouter style inline:
```



```
- Malgré le élitiste votes contre, cette réponse fonctionne très bien. Parce que la police génial, c'est une police, elle répond à des styles et des classes qui affectent le texte.
- Il est également préférable d'utiliser la minification, de regroupement et de mise en cache de ces ressources. Aucune des réponses ci-dessus démontrent tout de ces choses, et d'essayer et d'appliquer les meilleures pratiques suivies dans le cadre d'un isolé réponse est élitiste de l'OMI. Quiconque comprend CSS devrait être en mesure de prendre ce style et de le déplacer dans une classe CSS.
- Même le plus voté réponse est assez terrible en termes de bonnes pratiques. Vous ne devriez pas être la création de styles en commun des fichiers CSS des éléments de référence par #id, comme un seul élément serait en mesure de souscrire à ce style sur chaque page. Si je downvoted pour cette raison, ne devrais-je pas être assez élitiste? Les deux answerers fait un effort pour fournir de l'information utile à la personne, et je ne pense pas qu'ils devraient être downvoted lorsque leur réponse est en effet efficace.
- Si quelqu'un veut complémenter la réponse à un commentaire qui indique qu'il est généralement conseillé de ne pas utiliser des styles en ligne, alors ce serait approprié. Un moyen efficace et instructif réponse ne devrait pas être downvoted sur de telles futilités si quelqu'un pouvait avoir une amélioration de la valeur existante de la réponse en ajoutant un commentaire.
- Bien fait pour se concentrer sur ce qui compte!
- Pour moi, il ne fait pas de sens à la place d'une simple couleur de la directive css dans sa propre classe et le bundle avec votre css actif. Qu'allez-vous faire? class='icon-ok-sign my-red-class' ? ou class='icon-ok-sign-red' ? Ce qui la rend moins lisible et ajoute une inutile complexité.
- À l'aide de  balise pour les icônes n'est pas le meilleur de pratiques. Pourquoi pinailler alors?
- #id peut être remplacé par d'autres styles plus facilement que les styles en ligne peut, sans avoir besoin de "!important" - donc, c'est toujours moins mauvais. - D'autre part, je ne vois aucune raison de ne pas le faire .classe-nom --- soumis une modification pour le top rated question. --- l'aide j'ai des icônes est très bien, depuis que j'ai contrairement à em a pas de sens sémantique. Donc, tout à fait les pommes à des oranges à mon humble avis.
InformationsquelleAutor dandrews
99

Si vous êtes en utilisant Bootstrap dans le même temps, vous pouvez utiliser:
```

```
Autrement:
```

```
- l'ajout de text-success œuvres
- Sûrement la solution à la question que n'implique pas en utilisant bootstrap
- Il peut ne pas avoir besoin de bootstrap, mais je trouve cette question. Grâce Elgs!
- Vous pouvez le voir sur la capture d'écran qu'ils sont déjà en utilisant bootstrap. Il serait judicieux de continuer de l'utiliser pour maintenir la même palette de couleurs et de ne pas dupliquer le code.
- subtile mais importante: le texte-le succès est la couleur du texte, pas la couleur du bouton de la face pour le btn-success. Donc, si vous êtes désireux d'une icône pour ressembler à un "bouton plat", alors le succès sera légèrement différente. Je trouve que c'est plus apparente dans le texte de l'avertissement, car c'est un vilain jaune, par opposition à un très visibles orange
InformationsquelleAutor Qian Chen
42

Ressemble à la FontAwesome couleur de l'icône répond à texte-info, le texte de l'erreur, etc.
```
<div style="font-size: 44px;">
 
</div>
```
- Pour Bootstrap, 
- C'est probablement la meilleure réponse sur cette page, au moins pour moi, car je suis déjà en utilisant Bootstrap et ceci s'inscrit dans ce paradigme.
- texte d'erreur ne fonctionne pas, sauf si vous avez bootstrap
InformationsquelleAutor user1695595

espècesvotre.fichier css:

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

inyour.html fichier:

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

InformationsquelleAutor gingin

Il y a un moyen simple de changer la couleur de Police Impressionnant icônes.

HTML:

<!-- 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 de votre préférence.
NOTE: La couleur du texte va changer l'icône de la couleur ainsi que si il ya une style="color:#00cc6a" dans le i tag.

InformationsquelleAutor Calum Childs

9

À l'aide de FA 4.4.0 ajoutant
```
.text-danger
 color: #d9534f
```
le document css et ensuite à l'aide de
```
 
```
la couleur rouge. Vous pouvez définir votre propre pour n'importe quelle couleur.

InformationsquelleAutor Steve Gutierrez
8

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

```
Ici, j'ai défini un style global dans mon CSS où main-couleur est une classe, dans mon cas, c'est un peu de la teinte bleue. Je trouve que l'utilisation des styles en ligne sur les Icônes avec la Police Génial fonctionne bien, esp dans le cas lorsque vous nommez les couleurs du point de vue sémantique, c'est à dire nav-couleur si vous voulez une couleur pour qui, etc.

Dans cet exemple sur leur site, et comment j'ai écrit dans mon exemple ainsi, la nouvelle version de la Police Impressionnant a changé la syntaxe légèrement de réglage de la taille.Avant c'était:
```
icon-xxlarge
```
où maintenant je dois utiliser:
```
icon-3x
```
Bien sûr, tout cela dépend de la version de la Police Génial que vous avez installé sur votre environnement. Espérons que cette aide.

InformationsquelleAutor kinghenry14
7

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

InformationsquelleAutor angelokh
7

Simplement, vous pouvez définir une classe dans votre fichier css et cascade en fichier html comme
```
 
```
maintenant, écrivez dans css
```
.green{ color:green}
```
InformationsquelleAutor gdmanandamohon
7

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

Pour La Couleur : 
Pour L'Ombre : .fa-linkedin-carré{
text-shadow: 3px 6px #272634;
}`

InformationsquelleAutor arif imtiaz

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

InformationsquelleAutor Brandon Yang

4

J'ai eu le même problème quand j'ai essayé d'utiliser les icônes directement à partir de BootstrapCDN (le plus simple). Ensuite, j'ai téléchargé le fichier CSS et copié sur mon site CSS du dossier le fichier CSS (Décrit dans la "voie facile" dans la police impressionnant de la documentation), et tout a commencé à travailler comme ils le devraient.

InformationsquelleAutor Thanushka
4

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

ex:

HTML
```
 
```
CSS
```
i.fa {
 color: red;
 font-size: 30px;
}
```
InformationsquelleAutor Jonca33
3

De crédit: Puis-je changer la couleur de Police Impressionnant de la couleur de l'icône?

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

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

espècesvotre.fichier css:
```
.icon-bookmark.icon-white {
 color: white;
}
```
inyour.html fichier:
```
<div class="icon-bookmark icon-white"></div>
```
InformationsquelleAutor therobyouknow
2

Envelopper le je balise p ou à la plage, alors vous pouvez utiliser bootstrap css classe
```

```
InformationsquelleAutor etlds
2

Pour Police Impressionnant 5 SVG version, utilisez
```
filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
```
InformationsquelleAutor czLukasss
1

Comme il a été souligné, police impressionnant icônes de texte, par conséquent, vous style à l'aide de la CSS appropriée dans les attributs. Par exemple:
```
.fa-twitter-square {
    font-size: 15px;
    color: red;
}
```
Si, comme il arrive assez un peu pour moi, 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;
}
```
InformationsquelleAutor gmartinss

Modifier dynamiquement les propriétés css de .fa-xxx icônes:

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

InformationsquelleAutor yardpenalty

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

InformationsquelleAutor Dan Alboteanu

0

Je ne voudrais pas vous des conseils à utiliser construite en font-style impressionnant comme la fa-5x etc; de peur qu'ils peuvent changer et vous devez garder chainging le code de votre application pour rencontrer la norme la plus récente. Il vous suffit de les éviter en donnant à chaque font-awesome classe que vous voulez de style uniformément la même classe de dire:
```



```
Ici, la classe est fa-sabi-social-icônes

Ensuite dans votre css, vous pouvez le style des polices de caractères en utilisant les mêmes règles css vous style une police normale avec.
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 de polices de style

InformationsquelleAutor Lawrence Oputa
0

Pour Le Dimensionnement Des Icônes

Nos deux Polices Web + CSS et SVG + frameworks JS inclure quelques commandes de base pour le dimensionnement des icônes dans le cadre de votre page de l'INTERFACE utilisateur.

vous pouvez utiliser comme
```








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

InformationsquelleAutor TarangP

Vous devez vous connecter pour publier un commentaire.