Разработка - Градиенты иконок Font Awesome | Все для вебмастера

Делаем разметку HTML:

HTML:

<div class="container text-center">
  <div class="row">
    <div class="col-sm-12">
      <h1>Gradient icons</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2 col-sm-offset-3"><i class="fas fa-user fa-5x icon-blue"></i></div>
    <div class="col-sm-2"><i class="fas fa-frog fa-5x icon-green"></i></div>
    <div class="col-sm-2"><i class="fas fa-certificate fa-5x icon-orange"></i></div>
  </div>
  <div class="row">
    <div class="col-sm-2 col-sm-offset-3"><i class="fas fa-heart fa-5x icon-red"></i></div>
    <div class="col-sm-2"><i class="fas fa-football-ball fa-5x icon-brown"></i></div>
    <div class="col-sm-2"><i class="fas fa-fighter-jet fa-5x icon-gray"></i></div>
  </div>
  <div class="row">
    <div class="col-sm-2 col-sm-offset-3"><i class="fas fa-cookie fa-5x icon-beige"></i></div>
    <div class="col-sm-2"><i class="fas fa-globe fa-5x icon-greenblue"></i></div>
    <div class="col-sm-2"><i class="fas fa-cube fa-5x icon-purple"></i></div>
  </div>
</div>

Пишем LESS:

Less:

.icon-gradient() {
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.icon-blue {
  background-image: linear-gradient(45deg, #4481eb 0%, #04befe 100%);
  .icon-gradient();
}
.icon-green {
  background-image: linear-gradient(315deg, #9be15d 0%, #00e3ae 100%);
  .icon-gradient();
}
.icon-orange {
  background-image: linear-gradient(135deg, #FDD819 10%, #E80505 100%);
  .icon-gradient();
}
.icon-red {
  background-image: linear-gradient(45deg, #FF512F 20%, #DD2476 100%);
  .icon-gradient();
}
.icon-brown {
  background-image: linear-gradient(135deg, #FFAA85 10%, #B3315F 100%);
  .icon-gradient();
}
.icon-gray {
  background-image: linear-gradient(135deg, #616161 0%, #9bc5c3 100%);
  .icon-gradient();
}
.icon-greenblue {
  background-image: linear-gradient(0deg, #209cff 0%, #68e0cf 100%);
  .icon-gradient();
}
.icon-beige {
  background-image: linear-gradient(315deg, #772f1a 0%, #f2a65a 74%);
  .icon-gradient();
}
.icon-purple {
  background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
  .icon-gradient();
}
i {
  margin-top:50px;
}

Получаем результат:

Разработка Градиенты иконок Font Awesome

Ещё ресурсы от baltun