css - star - ¿Es posible colorear los colores del icono fontawesome?

star icons

Question

Puedo cambiar el fontcolor, pero no el "relleno". Primero intenté establecer el color de fondo, pero eso llena el área del cuadro de iconos completo.

Por ejemplo, tengo

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

pero quiero que sea amarillo

Editar: El caso de uso es que quiero que un icono "favorito" sea un esbozo de gris, al hacer clic, el contorno se vuelve de color naranja y se rellena de amarillo.

Answer 1

El problema con "-webkit-text-stroke" es que FF e IE no lo admiten del todo, así que lo que hago en este caso es usar la media estrella en una pseudo clase dentro de la estrella normal, algo como esto:

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

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

Y funciona para mí, aquí está el fiddle

Gracias.

Answer 2

Font-awesome viene con una serie de icons contorneados y llenos. La star es uno de ellos .

Hay cuatro clases diferentes de iconos de estrellas que puede usar:

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

Si eres un tipo de persona medio llena, también puedes usar el alias de ''icon-star-half-empty'':

class="icon-star-half-full"

Puede colorear los íconos increíbles de fuentes y usar diferentes efectos para lograr lo que está buscando:

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

Donde se usa el siguiente CSS (en lugar de usar estilos en línea):

.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;
}

También puede sustituir / establecer el tamaño, si no desea usar icon-large .

El código anterior muestra lo siguiente:

pero he puesto el código anterior y algunas otras opciones en un JSFiddle, que puede ver aquí .

También es posible usar css-transitions que proporciona una forma de animar los cambios a las propiedades de CSS en lugar de hacer que los cambios surtan efecto al instante o en combinación con javascript .

Answer 3

Si viniste aquí como si quisiera una manera de tener un color de "relleno" separado para un ícono que el color de la fuente (por ejemplo, la "F" del ícono de Facebook es transparente y muestra el fondo debajo), aquí está tu respuesta:

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

Tomas el cuadrado redondeado normal y lo apilas debajo del icono que quieres que sea visible. Si desea que sea blanco, puede especificar fa-inverse suponiendo que su valor predeterminado es negro. Más información aquí .

Answer 4

Todo lo que necesita es establecer el color: yellow . Debido a que los íconos son una fuente, tomarán cualquier color que establezca en cualquier otra fuente (texto) de la misma manera.

si quieres llenar toda la estrella de amarillo, prueba icon-star en lugar de icon-star-empty

puedes intentar esto

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

para agregar un trazo (contorno) a la fuente misma. Espero que sea eso lo que estás buscando.

y para llenarlo solo usa la normal

color: yellow;