Css 字体图标的2种垂直背景色

我正在尝试使用字体awesome创建一个flickr图标，并希望准确地表示颜色（这意味着图标两侧各有一个紫色和蓝色的点）。我试图用更少的渐变来实现这一点。但我一直无法弄清楚如何垂直对齐渐变（我只能弄清楚水平方向）

到目前为止，我所拥有的：

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

这会使渐变堆叠在错误的方向，并在图标外显示额外的颜色。如果有任何关于如何旋转渐变的建议，我将不胜感激，如果有任何关于多余颜色的帮助，我也将不胜感激。

参考资料

与其使用两个不同的渐变，为什么不使用一个在同一点开始和结束的带有停止点的渐变呢

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

---

至于溢出，我只是将其缩小，并给它一个垂直偏移量，以适合图标内部。

看起来这就是您想要的：

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

---

看起来我们需要一些截图/图像来准确显示您想要的内容。我希望它看起来像flickr徽标：但我希望使用字体和CSS，而不是图像文件。我对其他方法持开放态度，但我尝试使用背景渐变来为每个点着色。你不能在文本上使用渐变（图标字体是这样的）…虽然有一个-webkit“hack”-也很有用，尽管我会接受King更简洁的回答。