Question

我有这个：

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

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

这可以使用CSS吗？

Answer 1

您可以在图标背景上使用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;
}

Answer 2

你可以用bootstrap glyphicon完成你想要的东西，因为他们使用css属性＆＃39; color＆＃39;改变他们的背景颜色。（它们被认为是字体）

唯一的缺点是使用渐变更改字体颜色似乎只能使用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;
}

并在你头部元素内的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您希望该颜色占用多少空间。

ex：-webkit-linear-gradient（红色，绿色，绿色150％）;

您还可以设置希望渐变在标记上显示的角度。

ex：-webkit-linear-gradient（145deg，红色，绿色，绿色150％）;

两种颜色的油漆字体真棒

2 个答案: