Animate the colour of icons in a rainbow pattern - html

Question

How do I make font awesome icons change colour automatically like rainbow. In my current code, the text is changing colours but I want the icon to change colours too.
You can find a code example here:
#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

Below you can see that I just reused your code to change the color of a font awesome icon.
Changing color of a font awesome icon is similar to that of a text, i.e. using color
In the below snippet I just assigned the class rainbow to the font awesome icon.
.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>
EDIT: Updated the post to answer OP's second question which is in the comment section'

Answer 2

Just give a class of rainbow:
#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"><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></div>
</div>