2 вертикальных цвета фона для значка шрифта

Question

Я пытаюсь создать иконку flickr, используя font-awesome, и хотел бы точно представить цвета (что означает фиолетовую и синюю точку на каждой стороне значка). Я пытаюсь сделать это с МЕНЬШЕ, используя градиенты. Но я не смог понять, как выровнять градиенты по вертикали (я могу понять только по горизонтали).

Что у меня так далеко:

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

Это оставляет градиенты сложенными в неправильном направлении и показывает дополнительный цвет вне значков. Я был бы признателен за любые указания о том, как повернуть градиенты, и любая помощь по избыточным цветам также была бы полезна.

Answer 1

Похоже, это то, что вы хотите:

.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

Ссылка JS Fiddle

Вместо использования двух разных градиентов, почему бы не использовать один градиент с остановками, которые начинаются и заканчиваются в одной и той же точке.

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

Что касается переполнения, я просто уменьшил его и дал вертикальное смещение, чтобы оно поместилось внутри иконки.