用两种颜色绘制字体真棒

Question

我有这个：

<span class="fa fa-beer"></span>

我想用两种颜色（各一半）设置图标的颜色，例如红色和绿色。

这可以使用 CSS 吗？

Answer 1

你可以用 bootstrap 字形来完成你想要的，因为他们使用 css 属性 'color' 来改变他们的背景颜色。（它们被认为是字体）

唯一的缺点是，使用渐变更改字体颜色似乎只与使用 webkit 兼容，但这就是您要做的。（如果我错了请纠正我）。

Html:

<i class="glyphicon glyphicon-asterisk"></i>

css:

i {
    background: -webkit-linear-gradient(red, green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

并在 head 元素内的 html 代码顶部（如果您不知道如何包含引导带，请使用 cdn）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

注意：您可以在颜色后添加一个 % 来告诉 css 您希望该颜色占据多少 space。

例如：-webkit-线性渐变（红色、绿色、绿色 150%）；

您还可以设置渐变在标记上出现的角度。

例如：-webkit-linear-gradient(145deg, red, green, green 150%);

Answer 2

您可以像这样在图标背景上使用 background-clip:text 和渐变：

Demo

.fa-beer {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(.5, blue), color-stop(1, orange));
    background-image: gradient(linear, left top, right top, color-stop(0.5, blue), color-stop(1, orange));
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 1.8em;
}

用两种颜色绘制字体真棒

Paint font awesome with two colors

css

font-awesome