CODEWITHSUNDEEP
cssanimationfontastic
14wml
14wml

Reputation: 4166

Is it possible to animate Fontastic custom icon?

What I want to do

I made custom icons (e.g. icon-plus-circle) using Fontastic and I've been trying to animate them. When I hover over the icon-plus-circle I want it to get bigger. I tried to do that using font, but it didn't work.

My question is: it is possible to animate custom icons?

If someone could help me animate these custom icons that would be very much appreciated!

My code

HTML

<div class="student-row">
    <div class="student-box student-box-add">
        <button type="button" class="icon-plus-circle" aria-label="Add student"></button>
    </div>
</div>

CSS

.icon-plus-circle {
    color: #02C8A7;
    transition-property: font;
        -webkit-transition-property: font;
        -moz-transition-property: font;
        -o-transition-property: font;
    transition-duration: 0.5s;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
}

icon-plus-circle:hover{
    font-size: 5em;
}

JSFiddle

Upvotes: 0

Views: 171

Answers (1)

juanvega
juanvega

Reputation: 26

The reason that your css class was not activating on hover was because you forgot to place a period in front of the class.

So this:

    icon-plus-circle:hover{
      font-size: 5em;
}

Should be this:

   .icon-plus-circle:hover{
      font-size: 5em;
}

I fixed it for you in this js-fiddle!

https://jsfiddle.net/uthvam65/

Upvotes: 1

Related Questions