web-dev-qa-db-fra.com

Dégradé de texte avec une police impressionnante

Je viens de découvrir police géniale et je veux l'utiliser dans mon site Web.

Le problème est que je veux que ma police soit colorée avec un dégradé. J'ai trouvé ce code qui fonctionne sur du texte standard, mais je ne peux pas le faire fonctionner avec une icône de Font Awesome

Voici ce que j'ai testé:

<style>
    .big-icon {
        font-size: 72px;
        background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
</style>

<span class="big-icon">
    Hello world
</span>
<i class="icon-beaker"></i>
<span class="big-icon">
    <i class="icon-beaker"></i>
</span>

Et il affichait un "Hello world" avec un dégradé, l'icône que je veux et puis rien ...

Quelqu'un a quelquonque idée ?

Merci

htmlcssfont-awesome
27
Gael Du Plessix

A donné un coup rapide; la chose importante à réaliser est que Font Awesome ajoute les icônes réelles via le pseudo-élément 'avant' :

[class^="icon-"]::before,
[class*=" icon-"]::before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

.icon-beaker:before {
  content: "\f0c3";
}

Pour appliquer l'effet de dégradé à l'icône, vous devez cibler le pseudo-élément qui contient l'icône - voir this jsFiddle pour une démonstration de travail basée sur votre code:

.big-icon:before {
  font-size: 72px;
  background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial; /* reset Font Awesome's display:inline-block */
}​

Edit: Le jsFiddle lié ci-dessus ne fonctionne plus comme prévu car le fichier CSS lié qui contient les icônes "FontAwesome" a été déplacé; une version de travail utilisant la version hébergée par bootstrapcdn.com de FontAwesome v4.0.3 et les noms de classe CSS de FontAwesome-icon mis à jour est disponible sur http://jsfiddle.net/HGxMu/55/

35
fk_

Appliquez les styles directement sur l'icône.

.fa-gradient {
        background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-3x fa-wrench fa-gradient"></i>
23
Nathalia Xavier