font awesome - ttf - Color de fondo impresionante de fuente

font awesome link

Question

Cuando utilizo la genial Font Awesome, ¿cómo puedo hacer que los iconos no sean transparentes? Por ejemplo, si quiero usar http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/ pero no tengo el " ¿flecha arriba "dentro del círculo negro debe ser transparente pero de color sólido (blanco)?

¡Gracias!

Answer 1

Desafortunadamente, todo el ícono se considera un "carácter" único en la página y, como tal, no tiene ese control granular sobre él. Simplemente puede configurar una sola propiedad de "color" para configurar el color del carácter / icono para que sea lo que usted desea.

Ahora, sin embargo, es posible para un hack creativo. Como la mitad del personaje es transparente, puedes establecer un fondo de color detrás del personaje para que parezca que la mitad es de un color diferente haciendo algo como esto:

 <i class="fa fa-chevron-circle-up"></i>

entonces en tu CSS:

.fa-chevron-circle-up {
background: yellow;
border-radius: 50%;
height: 1em;
width: 1em;
}

Si el círculo de fondo desplaza el ícono, puede usar line-height para corregirlo.

Answer 2

Tengo otro truco para las personas que todavía están interesadas:

<i class="fa fa-chevron-circle-up fa_with_bg"></i>

Y el css

.fa_with_bg{
position: relative;
}
.fa_with_bg::after{
position: absolute;
content: '''';
background: #fff;
z-index: -1;
top: 10px;
left: 3px;
width: 35px;
height: 33px;
}

Solo necesitas agregarle la clase fa_with_bg .
* Es posible que tengas que jugar un poco con las propiedades top , left , width y height .

Answer 3

puede usar fa-stack con el icono de fa-circle debajo del otro para tener un mejor control sobre el píxel justo en el borde:

<span class="fa-stack">
<i class="fa fa-circle fa-stack-1x icon-a"></i>
<i class="fa fa-times-circle fa-stack-1x icon-b"></i>
</span>

con:

.icon-a {
color: #FFF;
font-size: 0.9em;
}
.icon-b {
color: #000;
}