html - How to animate the color of an Ionicon? -

I want to change the color (think SVG) I tried the following, but this is only the SVG icon Shows:

Elements

  & lt; Class = "ion-social-twitter button-house" & gt; & Lt; / A & gt;  

CSS

  .button-home {fill: #fff; Webkit-Animation: Animation Button 20000 Mms Infinite; -moz-animation: animation-button 20000 mms infinite; -A-Animation: Animation-Button 20000ms Infinite; Animation: Animation-Button 20000 MMS Infinite; Font-size: 25V; } @ -webkit-keyframe animation-button {0% {fill: red; } 25% {fill: yellow; } 50% {fill: blue; } 75% {fill: green; } 100% {fill: red; }} @ Keyframe animation-button {0% {fill: red; } 25% {fill: yellow; } 50% {fill: blue; } 75% {fill: green; } 100% {fill: red; }}  

using ionicons as the font Just change fill to color , like -

  @ - WebKit-keyframe animation-button {0% {color: red; } 25% {color: yellow; } 50% {Color: blue; } 75% {color: green; } 100% {Color: Red; }} @ Keyframe animation-button {0% {color: red; } 25% {color: yellow; } 50% {Color: blue; } 75% {color: green; } 100% {Color: Red; }}  

Demo with bootstrap glyphicon here