Как изменить внутренний (белый) цвет иконки <i class="fa fa-exclamation-triangle"></i>?

Постскриптум Применение <i class="fa fa-exclamation-triangle" style="color:red"></i> не является ответом, поскольку красный цвет применяется к внешнему цвету, а не к самому внутреннему восклицательному белому знаку.

Версия Font Awesome: 4.7.0.

3
Haradzieniec 20 Сен 2018 в 12:39

2 ответа

Лучший ответ

Восклицательный знак этого значка является прозрачной частью, поэтому хитрость заключается в том, чтобы добавить фон позади него, чтобы получить необходимую окраску. Конечно, фон не должен покрывать всю область, поэтому нам нужно использовать градиент, чтобы покрыть только его часть.

.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>

< Сильный > UPDATE

Чтобы сделать ответ более общим, мы также можем рассмотреть множественный фон и радиальный градиент, чтобы раскрасить любую форму. Хитрость заключается в том, чтобы покрыть фоном прозрачную часть, не переполняя ее.

Вот несколько примеров иконок:

.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>
6
Temani Afif 24 Сен 2018 в 22:35

Ответ Темани Афиф - хороший! Вот еще один подход;

.fa-exclamation-triangle{
  position: relative;
  z-index:0;
}
.fa-exclamation-triangle:after{
  content: ' ';
  width: 20%;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 40%;
  background: red;
  z-index: -1;
}
<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>
2
Temani Afif 20 Сен 2018 в 10:09