I have a question. I know this is possible but idk how to do it. The question is how to make font awesome icons change color automaticly like rainbow. For example like 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>the text is changing colors but i want the icon to change the color. Any ideas how to do it? Thanks :D I would be thankful if you could send the code or correct it so it will work propertly