폰트 아이콘을위한 2 세로 배경 색상

Question

글꼴 멋진 아이콘을 만들려고하고 있으며, 정확하게 색상을 표현하고 싶습니다 (이는 아이콘의 양쪽에 자주색과 파란색 점을 의미합니다).나는 그라디언트를 사용하지 않고 이것을하려고 노력하고 있습니다.그러나 나는 그라디언트를 수직으로 정렬하는 방법을 알아낼 수 없었습니다 (나는 수평을 알아낼 수 있습니다).

지금까지 가지고있는 것 :

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

.

데모.

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

.

오버 플로우에 대해서는 단순히 더 작게 만들고 아이콘 안에 들어가기위한 수직 오프셋을 고려합니다.