Question

我正在尝试使用font-awesome创建一个flickr图标，并且想要准确地表示颜色（这意味着图标两侧的紫色和蓝色点）。我试图用LESS使用渐变来做到这一点。但我一直无法弄清楚如何垂直对齐渐变（我只能弄清楚水平）。

到目前为止我所拥有的：

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

至于溢出，我只是把它缩小了，并给它一个垂直偏移量以适应图标。

2个字体图标的垂直背景颜色

2 个答案:

Demo.