How to animate the color of an Ionicon?

Question

I want an ionicon (guess its SVG) to iteratively change color. I tried the following, but it only shows the svg icon in purple:

element

<a class="ion-social-twitter button-home"></a>

css

.button-home {
    fill: #fff;
    -webkit-animation: animation-button 20000ms infinite;
    -moz-animation: animation-button 20000ms infinite;
    -o-animation: animation-button 20000ms infinite;
    animation: animation-button 20000ms infinite;
    font-size: 25vh;
}

@-webkit-keyframes animation-button {
    0%   {fill:red; }
    25%  {fill:yellow; }
    50%  {fill:blue; }
    75%  {fill:green; }
    100% {fill:red; }
}
@keyframes animation-button {
    0%   {fill:red; }
    25%  {fill:yellow; }
    50%  {fill:blue; }
    75%  {fill:green; }
    100% {fill:red; }
}

Have changed the question to: how to animate the color of an ionicon. I thought it was a svg icon? For me, it does not work, the colour stays purple. — WJA, Mar 16 '15 at 13:25

Ramiz Wachtler · Accepted Answer · 2019-07-26T06:31:34.740

1

You use ionicons as font. Just change the fill to color, like this -

@-webkit-keyframes animation-button {
    0%   {color:red; }
    25%  {color:yellow; }
    50%  {color:blue; }
    75%  {color:green; }
    100% {color:red; }
}

@keyframes animation-button {
    0%   {color:red; }
    25%  {color:yellow; }
    50%  {color:blue; }
    75%  {color:green; }
    100% {color:red; }
}

Here a demo with Bootstrap Glyphicons.

Fiddle

edited Jul 26 '19 at 06:31

answered Mar 16 '15 at 13:31

Ramiz Wachtler

5,623
2
28
33

@SeanHalls Thanks for notifying, I've fixed the fiddle. – Ramiz Wachtler Jul 26 '19 at 06:32

score 1 · Answer 2 · answered Mar 16 '15 at 13:59

Its type of icon font, So tyr to use color (not fill)

.button-home {
    color: #fff;
    -webkit-animation: animation-button 20000ms infinite;
    -moz-animation: animation-button 20000ms infinite;
    -o-animation: animation-button 20000ms infinite;
    animation: animation-button 20000ms infinite;
    font-size: 25vh;
}

@-webkit-keyframes animation-button {
    0%   {color:red; }
    25%  {color:yellow; }
    50%  {color:blue; }
    75%  {color:green; }
    100% {color:red; }
}
@keyframes animation-button {
    0%   {color:red; }
    25%  {color:yellow; }
    50%  {color:blue; }
    75%  {color:green; }
    100% {color:red; }
}

How to animate the color of an Ionicon?

2 Answers2