web-dev-qa-db-fra.com

Est-il possible de colorer les couleurs des icônes impressionnantes?

Je peux changer la couleur de la police, mais pas le "remplissage". J'ai d'abord essayé de définir la couleur d'arrière-plan, mais cela remplit toute la zone de la boîte d'icônes.

Par exemple, j'ai

<i class="icon-star-empty icon-large"></i>

mais je veux que ce soit jaune.

Edit: Le cas d'utilisation est que je veux qu'une icône "favorite" soit un contour de gris, au clic, le contour devient orange, remplit en jaune.

cssfont-awesome
36
jqed

Font-awesome est livré avec un certain nombre à la fois souligné et rempli icônes . Le étoile est l'un d'entre eux .

Il existe quatre classes d'icônes d'étoiles différentes que vous pouvez utiliser:

class="icon-star"
class="icon-star-empty"
class="icon-star-half"
class="icon-star-half-empty"

Si vous êtes un type de personne à moitié plein de verre, vous pouvez également utiliser l'alias pour 'icône-étoile à moitié vide':

class="icon-star-half-full"

Vous pouvez colorer les icônes géniales et utiliser différents effets pour obtenir ce que vous recherchez:

<i class="icon-star-empty icon-large icon-a"></i><br><br>
<i class="icon-star-empty icon-large icon-b"></i><br><br>
<i class="icon-star icon-large icon-c"></i> or <i class="icon-star icon-large icon-d"></i>

Où le CSS suivant est utilisé (plutôt que d'utiliser des styles en ligne):

.icon-a {
    color: #888;
} 
.icon-b {
    color: orange;
}
.icon-c {
    color: yellow;
}
.icon-d {
    color: yellow;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: orange;
}

Vous pouvez également remplacer/définir la taille également, si vous ne souhaitez pas utiliser icon-large.

Le code ci-dessus génère les informations suivantes:

enter image description here

mais j'ai mis le code ci-dessus et quelques autres options dans un JSFiddle, que vous pouvez voir ici .

Il est également possible d'utiliser css-transitions qui fournit un moyen d'animer les modifications des propriétés CSS au lieu de les faire prendre effet instantanément et ou en combinaison avec javascript .

72
nickhar

Il vous suffit de définir color: yellow. Étant donné que les icônes sont une police, elles prendront la couleur que vous auriez définie pour toute autre police (texte) de la même manière.

si vous voulez remplir l'étoile entière en jaune, essayez icon-star au lieu de icon-star-empty

tu peux essayer ça

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;

pour ajouter un trait (contour) à la police elle-même. J'espère que c'est ce que vous recherchez.

et pour le remplir, utilisez simplement la normale

color: yellow;
9
Lucas Lim

Si vous êtes venu ici comme si je voulais un moyen d'avoir une couleur de remplissage distincte pour une icône que la couleur de la police (par exemple, le "F" de l'icône Facebook est transparent et montre quel que soit l'arrière-plan en dessous), voici Ta Réponse:

<p class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x fa-2x fa-inverse"></i>
    <i class="fa fa-facebook-square fa-stack-2x fa-2x"></i>
</p>

Vous prenez le carré arrondi régulier et l'empilez sous l'icône que vous voulez voir. Si vous souhaitez qu'il soit blanc, vous pouvez spécifier fa-inverse en supposant que votre valeur par défaut est noir. Plus d'informations ici .

6
Brynn Bateman

Le problème avec "-webkit-text-stroke" est qu'il n'est pas entièrement pris en charge par FF et IE, donc ce que je fais dans ce cas est d'utiliser la demi-étoile dans une pseudo-classe à l'intérieur de l'étoile normale, quelque chose comme ceci:

.icon-star.red-border {
    position: relative;
    color: blue;
    font-size: 24px;
}

.icon-star.red-border:after {
    content: "\f006";
    color: red;
    position: absolute;
    left: 0;    
}

Et ça marche pour moi, voici le violon

Merci.

6
Milo Mora

S'étendant aux réponses ci-dessus, vous souhaitez parfois ajouter un trait/bordure à la police/icône. Dans ce cas, ce qui suit est présenté.

Au moins dans WebKit. Exemple:

h1 {
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

Ou sténographie:

h1 {
  -webkit-text-stroke: 1px black;
}

Le coup fonctionne dans WebKit mais disparaît dans les autres navigateurs! Alternative? Nous pouvons utiliser la propriété text-shadow et simuler un trait.

h1 {
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

Nous utilisons quatre ombres, chacune décalée de 1px de noir sans propagation, une en haut à droite, en haut à gauche, en bas à gauche et en bas à droite.

Le seul blocage serait IE9 et le bas, que vous pouvez bien sûr utiliser IE CSS spécifique pour tenir compte.

P.S. Pour ma propre référence aussi.

Source: Lien

1
Bsienn

si vous utilisez, reactjs et sous les composants

<i className="icon-star-empty icon-large" style={{color: "grey", fontSize: "70px"}}></i>
0
Prashanth Sams