Gradiente de texto con fuente impresionante

Acabo de descubrir font awesome y quiero usarlo en mi sitio web.Gradiente de texto con fuente impresionante

El problema es que quiero que mi fuente se coloree con un degradado. encontré this code que funciona en texto estándar, pero no puedo hacer que funcione con un icono de Font impresionante

Esto es lo que he probado:

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

Y exhibidas un "Hola mundo" con un gradiente, el ícono que quiero y luego nada ...

¿Alguien tiene alguna idea?

Gracias

Fuente

2012-10-04 Gael Du Plessix

Su fuente increíble enlace no funciona. Hace que sea bastante difícil ayudar a quienes no estamos familiarizados con él. – KRyan

Lo siento, lo arreglé. –

¿Por qué tiene dos tramos con class = "big-icon"? ¿No funcionaría todo dentro de un tramo? –

Dio esta una oportunidad rápida; Lo importante es darse cuenta de que la fuente impresionante suma los iconos reales a través de la 'before' pseudo-element:

[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"; 
}

Para aplicar el gradiente efecto al icono, hay que dirigirse a la pseudo-elemento que contiene el icono - ver this jsFiddle de una demostración de trabajo en base a su código:

.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 */ 
}

Editar: el jsFiddle vinculado anterior no funciona como se esperaba más porque el CSS-archivo vinculado que contiene el "FontAw esome "-icons se ha movido; una versión de trabajo que utiliza la versión bootstrapcdn.com-hosted de FontAwesome v4.0.3 y nombres de clase CSS FontAwesome-icon actualizados está disponible en http://jsfiddle.net/HGxMu/55/

Fuente

2012-10-05 23:19:06

+11

¿Alguien ha encontrado la manera de que esto funcione en el navegador cruzado? – webkit

Aplique los estilos directamente en el icono.

.fa-gradient { 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333)); 
 
\t -webkit-background-clip: text; 
 
\t -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>

Fuente

2017-01-02 23:26:42

Gradiente de texto con fuente impresionante

Respuesta

Cuestiones relacionadas