2 colores verticales de fondo para un icono de fuente

Question

Estoy tratando de crear un icono de Flickr usando font-increíble, y le gustaría representar los colores con precisión (lo que significa un punto púrpura y azul en cada lado del icono).Estoy tratando de hacer esto con menos usando gradientes.Pero no he podido averiguar cómo alinear verticalmente los gradientes (solo puedo calcular la horizontal).

lo que tengo hasta ahora:

.fa-flickr:before {
    color: #fff; 
    background-image: linear-gradient(to left, #0062da 100%, #0062da 100%),
                      linear-gradient(to right, #ff0084 100%, #ff0084 100%);
    background-size: 100% 50%, 100% 50%;
    background-position: 0 0, 0 100%;
    transform: rotate(90%);
    background-repeat: no-repeat;            
}

http://jsfiddle.net/fqjhe/2/

Esto deja a los gradientes apilados en la dirección equivocada, y muestra un color extra fuera de los iconos.Agradecería cualquier puntero sobre cómo obtener los gradientes girados, y cualquier ayuda en el exceso de colores también sería genial.

Answer 1

Parece que esto es lo que quieres:

.fa-flickr {        
    color: #fff; 
    background-image: linear-gradient(to right, #0062da 50%, #ff0084 50%);   
    background-size: 80% 80%; 
    background-position:center;
    background-repeat: no-repeat;        
}

Demo.

Answer 2

Referencia JS Fiddle

En lugar de usar dos gradientes diferentes, por qué no usar un solo gradiente con paradas que comiencen y terminen en el mismo punto.

.fa-flickr:before {
    color: #fff; 
    background-size: 100% 50%;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    background-image: linear-gradient(
        to right,
        #0062da 50%,
        #ff0084 50%
    );
}

En cuanto al desbordamiento, simplemente lo he hecho más pequeño y le dio un desplazamiento vertical para encajar dentro del ícono.