我为 Fontawesome 图标定义了一些样式,以将浏览器图标着色为其相应的品牌颜色。所以 Opera 图标是红色的,IE 是蓝色的,而 Firefox 是橙色的。
但是由于 Chrome 有 4 种不同的颜色,并且分离得非常严格,我想知道是否有可能仅使用 CSS 来模仿类似的东西?
据我所知最接近的是渐变,但显然看起来不太正确。
i.fa-chrome {
font-size: 3rem;
background-image: linear-gradient(to bottom right, yellow, limegreen, crimson, blue, blue);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="p-3">
<i class="fa fab fa-chrome"></i>
</div>
这里是否可以通过一些背景裁剪和 CSS 黑客技术来做更多的事情,以看起来更接近原始图标的视觉标识?
最佳答案
有了多个背景,你可以做到,但正如我在 this pevious answer 中所写的那样它仍然特定于这个特定的图标:
.fa-chrome {
font-size: 3rem;
background:
linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0% /37% 30%,
linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,
radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
linear-gradient( 47deg, #34a853 42%,transparent 43%),
linear-gradient(-72deg, #fbbc05 42%,transparent 43%),
linear-gradient(-199deg, #ea4335 42%,transparent 43%);
background-repeat:no-repeat;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<i class="fab fa-chrome fa-8x"></i>
<i class="fab fa-chrome fa-5x"></i>
<i class="fab fa-chrome fa-3x"></i>
与Font Awesome V4相同的代码
.fa-chrome {
background:
linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0% /37% 30%,
linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,
radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
linear-gradient( 47deg, #34a853 42%,transparent 43%),
linear-gradient(-72deg, #fbbc05 42%,transparent 43%),
linear-gradient(-199deg, #ea4335 42%,transparent 43%);
background-repeat:no-repeat;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<i class="fa fa-chrome fa-5x"></i>
<i class="fa fa-chrome fa-4x"></i>
<i class="fa fa-chrome fa-2x"></i>
关于css - 多色单个图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61065667/