Анимируйте цвет значков в радуге

Question

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

Пример кода можно найти здесь:

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url('https://fonts.googleapis.com/css?family=Anton');

h1, h2{
  text-align:center;
}

h1{
  color:rgba(100, 50, 255, .8);
  font-family: 'Pacifico', cursive;
  color:#212121;
}

.rainbow {
  
   /* Font options */
  font-family: 'Pacifico', cursive;
  text-shadow: 2px 2px 4px #000000;
  font-size:40px;
  
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 5s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 5s infinite;
  
  /* Standar Syntax */
  animation: rainbow 5s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
   0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

body{
  background-color:#607D8B;
}

.container{
  background-color:#E0F2F1;
  padding:10px;
  border-radius:15px;
  box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);
}

<div class="container">
  <h1>SIMPLE CSS RAINBOW TEXT</h1>

  <h2 class="rainbow">Rainbow Text</h2>
</div>

Answer 1

Просто дайте класс радуги:

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url('https://fonts.googleapis.com/css?family=Anton');
h1,
h2 {
  text-align: center;
}

h1 {
  color: rgba(100, 50, 255, .8);
  font-family: 'Pacifico', cursive;
  color: #212121;
}

.rainbow {
  /* Font options */
  font-family: 'Pacifico', cursive;
  text-shadow: 2px 2px 4px #000000;
  font-size: 40px;
  /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 5s infinite;
  /* Internet Explorer */
  -ms-animation: rainbow 5s infinite;
  /* Standar Syntax */
  animation: rainbow 5s infinite;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes rainbow {
  0% {
    color: orange;
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}


/* Internet Explorer */

@-ms-keyframes rainbow {
  0% {
    color: orange;
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}


/* Standar Syntax */

@keyframes rainbow {
  0% {
    color: orange;
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}

body {
  background-color: #607D8B;
}

.container {
  background-color: #E0F2F1;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="rainbow">
  <section id="hand">

    <div class="row fontawesome-icon-list">



      <div class="fa-hover col-md-3 col-sm-4"><a href="../icon/hand-rock-o"><i class="rainbow fa fa-hand-grab-o" aria-hidden="true"></i> <span class="sr-only">Example of </span>hand-grab-o <span class="text-muted">(alias)</span></a></div>


  </div>

Answer 2

Ниже вы можете видеть, что я просто повторно использовал ваш код , чтобы изменить цвет значка шрифта.

Изменение цвета значка шрифта выглядит так же, как у текст, т.е. используя color

В следующем фрагменте я только что назначил радугу класса значку шрифта.

.rainbow {
  /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 5s infinite;
  /* Internet Explorer */
  -ms-animation: rainbow 5s infinite;
  /* Standar Syntax */
  animation: rainbow 5s infinite;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes rainbow {
  0% {
    color: orange;
    transform: rotate(360deg);
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}


/* Internet Explorer */

@-ms-keyframes rainbow {
  0% {
    color: orange;
    transform: rotate(360deg);
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}


/* Standar Syntax */

@keyframes rainbow {
  0% {
    color: orange;
    transform: rotate(360deg);
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<i class="fas fa-exclamation-triangle rainbow fa-7x"></i>

РЕДАКТИРОВАТЬ: Обновлено сообщение для ответа на второй вопрос OP, который находится в разделе комментариев '