FontAwesome 5 提供了数千个使用 SVG 构建的图标。这样,很容易使用 fill
为整个图标着色。但是如果我想使用多种颜色怎么办?例如,给定图标 Google ,我想像这样给它上色:
原文由 Eliya Cohen 发布,翻译遵循 CC BY-SA 4.0 许可协议
FontAwesome 5 提供了数千个使用 SVG 构建的图标。这样,很容易使用 fill
为整个图标着色。但是如果我想使用多种颜色怎么办?例如,给定图标 Google ,我想像这样给它上色:
原文由 Eliya Cohen 发布,翻译遵循 CC BY-SA 4.0 许可协议
在不弄脏您的手的情况下,您无法使用 FontAwesome(或任何其他可用的图标字体)实现这一点——也就是说,修改字体并在您创建的部分图标字符之上创建您自己的自定义 HTML 和 CSS。
将每个图标颜色的部分分别创建为一个角色并将它们堆叠在一起。该示例堆叠了两个现有的 FA 图标来展示该技术:
.stack-icons {
position: absolute;
}
.stack-icons i[class*=fa-] {
position: absolute;
color: orange;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.stack-icons i[class*=fa-]+i[class*=fa-] {
color: #a00;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="stack-icons">
<i class="far fa-circle"></i>
<i class="fas fa-angle-up"></i>
</div>
原文由 connexo 发布,翻译遵循 CC BY-SA 4.0 许可协议
3 回答1k 阅读✓ 已解决
4 回答1.3k 阅读✓ 已解决
2 回答950 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
2 回答1.4k 阅读✓ 已解决
2 回答922 阅读✓ 已解决
2 回答1.1k 阅读✓ 已解决
通过对颜色和两个图标使用渐变,我们可以实现这一点,但它仍然是一种 hacky 方式,您需要专门处理每种情况(图标 + 着色):
我们也可以考虑用一个图标来使用
conic-gradient()
。同样,它特定于这种特殊情况:以上不适用于所有浏览器,因此您可以考虑多个
linear-gradient
如下所示: