Result

Font Awesomeのアイコンをアニメーションで変化するグラデーションカラーにする
例によってbackground-clipとtext-fill-colorを使用します

css

.element span {/*font-familyにFont Awesomeを指定してtransition設定しておく*/
  color: #4a4a4e;
  text-decoration: none;
  transition: .2s;
  font-family: "Font Awesome 5 Free";
}
.element span:before {/*アイコンはフォントなのでテキストの形で切り抜く*/
  font-family: "Font Awesome 5 Free";
  font-size: 3rem;
  transition: .2s all;
  opacity: 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: Gradient 1s ease-in-out infinite;
  background-size: 200% 200%;
}

/*要素毎にアイコンとグラデーションカラーを指定していく*/
.element .obj,
.element .obj:before{
   content: "\f25b";
}
.element .obj:before{
  background-color: #FA8BFF;
  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

.element .foo,
.element .foo:before{
   content: "\f2b9";
}
.element .foo:before{
  background-color: #ddd;
  background-image: linear-gradient(45deg, #aaa 0%, #555 52%, #000 90%);
}
.element .bar,
.element .bar:before{
   content: "\f28d"
}
.element .bar:before{
  background-color: red;
  background-image: linear-gradient(45deg, orange 0%, yellow 52%, #ffd700 90%);
}
.element .hoge,
.element .hoge:before{
 content: "\f2d0"
}
.element .hoge:before{
  background-color: #ddd;
  background-image: linear-gradient(45deg, #895b8a 0%, #f6bfbc 52%, #80aba9 90%);
}
.element .huga,
.element .huga:before{
  content: "\f2bd"
}
.element .huga:before{
   background-color: #ddd;
  background-image: linear-gradient(45deg, #4169e1 0%, #1e90ff 52%, #add8e6 90%);
}
.element .piyo,
.element .piyo:before{
   content: "\f059"
}
.element .piyo:before{
   background-color: #ddd;
  background-image: linear-gradient(45deg, #00ff7f 0%, #00ff00 52%, #6b8e23 90%);
}

/*設定したグラデーションのポジションをアニメーションで変化させる*/
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

CSSが長く見えますが、基本設定箇所は多くありません

html

   <div class="element relative pa3 flex items-center justify-center">
      <span class="obj "></span>
      <span class="foo"></span>
      <span class="bar"></span>
      <span class="hoge"></span>
      <span class="huga"></span>
      <span class="piyo"></span>
   </div>

via

Font Awesome Animated Gradient