html - 更改 Font Awesome 图标的颜色
问题描述
如何更改图标的内部(白色)颜色
<i class="fa fa-exclamation-triangle"></i>
?
PS Applying<i class="fa fa-exclamation-triangle" style="color:red"></i>
不是答案,因为红色适用于外部颜色,而不是内部感叹号白色标志本身。
Font Awesome 版本是:4.7.0。
解决方案
这个图标的感叹号是一个透明的部分,所以一个技巧是在它后面添加一个背景以获得所需的颜色。当然,背景不应覆盖整个区域,因此我们需要使用渐变来仅覆盖其中的一部分。
.fa-exclamation-triangle {
background:linear-gradient(red,red) center bottom/20% 84% no-repeat;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<i class="fas fa-exclamation-triangle fa-7x"></i>
<i class="fas fa-exclamation-triangle fa-4x"></i>
<i class="fas fa-exclamation-triangle fa-2x"></i>
V4也是一样:
.fa-exclamation-triangle {
background:linear-gradient(red,red) center /20% 70% no-repeat;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-exclamation-triangle fa-5x"></i>
<i class="fa fa-exclamation-triangle fa-4x"></i>
<i class="fa fa-exclamation-triangle fa-2x"></i>
还有 SVG 版本:
.fa-exclamation-triangle {
background:linear-gradient(red,red) center bottom/20% 84% no-repeat;
}
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" ></script>
<i class="fas fa-exclamation-triangle fa-7x"></i>
<i class="fas fa-exclamation-triangle fa-4x"></i>
<i class="fas fa-exclamation-triangle fa-2x"></i>
更新
为了使答案更通用,我们还可以考虑多个背景和径向渐变,以便为任何类型的形状着色。诀窍是用背景覆盖透明部分而不会溢出。
以下是一些图标示例:
.fa-exclamation-triangle {
background:linear-gradient(red,red) center bottom/20% 84% no-repeat;
}
.fa-ambulance {
background:
linear-gradient(blue,blue) 25% 30%/32% 45% no-repeat,
radial-gradient(green 60%,transparent 60%) 15% 100%/30% 30% no-repeat,
radial-gradient(green 60%,transparent 60%) 85% 100%/30% 30% no-repeat;
}
.fa-check-circle {
background:radial-gradient(yellow 60%,transparent 60%);
}
.fa-angry {
background:
radial-gradient(red 60%,transparent 60%) 25% 40%/30% 30% no-repeat,
radial-gradient(red 60%,transparent 60%) 75% 40%/30% 30% no-repeat;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<i class="fas fa-exclamation-triangle fa-7x"></i>
<i class="fas fa-ambulance fa-7x"></i>
<i class="fas fa-check-circle fa-7x"></i>
<i class="fas fa-angry fa-7x"></i>
推荐阅读
- java - 使用 PDFBox 打印 PDF 永远不会完成
- c# - 当一个线程完成任务而另一个线程正在运行时,有没有办法更新 Web 表单 UI
- go - 如何修复 linter 警告“未检查错误返回值”?
- prolog - 析取算子的等价与多条规则的定义
- javabeans - 在 Elementor 中进行实时编辑时禁用整个字符串
- python - 尝试在python中做“1-x+x^2-x^3+x^4-x^5 ...”系列,有人有什么想法吗?
- reactjs - 使用 jest 和 react-testing-library 测试对象属性时出错
- javascript - 检查元素是否具有特定的类 JQUERY
- java - 一个愚蠢的问题:如何在一堆文件中识别一个 jar 文件?
- mysql - 简单的内连接和索引