Creating my own animated icons

I misght've just simply missed explanation of it if it does exist, if so, simply point me to the URL of it, but here's the deal: Instead of Truphy Cup I need to put "book" icon there. FontAwesome does have fa-book (), so using override.css I need to create (copypaste) class from, say icon-heart, but couldn't find the code to sample in font-awesome.css
Would you, please, help me out again?
And thanks for the template! Love it!

Please change icon html to this:

Code: Select all

<i class="fa fa-book"></i>


(please disable tinyMCE editor in global configuration (change editor to "editor - none") first)
If you need list of fa-book name replacement, please check this url:
http://fortawesome.github.io/Font-Awesome/icons/

[quote="Cyberek"]Please change icon html to this:

Code: Select all

<i class="fa fa-book"></i>


Do you mean to say, that in this template classes are already created for all font-awesome vectors? If so, that's just rocking great!

Yes, font awesome stylesheet is included by default .

Please change icon html to this:

Code: Select all

<i class="fa fa-book"></i>


(please disable tinyMCE editor in global configuration (change editor to "editor - none") first)
If you need list of fa-book name replacement, please check this url:
http://fortawesome.github.io/Font-Awesome/icons/

Ok, Cyberek, I've tried it - it places static icon (which is great anyway, thanks!), but I was asking for sample code to recreate my own ANIMATED icons. Just tell me which CSS the ones created by you are in, and I'll get from there on my own.
Thanks.

Please check gk.stuff.css for blocks like this one:

Code: Select all

.big-title .header .gk-icon-pencil {
   display: inline-block;
   opacity: 0;
   position: relative;
   left: 80px;
   -webkit-transition: all .75s cubic-bezier(0,.54,.15,.98);
   -moz-transition: all .75s cubic-bezier(0,.54,.15,.98);
   -ms-transition: all .75s cubic-bezier(0,.54,.15,.98);
   -o-transition: all .75s cubic-bezier(0,.54,.15,.98);
   transition: all .75s cubic-bezier(0,.54,.15,.98);
   -webkit-transition-delay: .4s;
   -moz-transition-delay: .4s;
   -ms-transition-delay: .4s;
   -o-transition-delay: .4s;
   transition-delay: .4s;
}


Or this one which uses custom keyframes:

Code: Select all

.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-flame,
.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-heart,
.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-star {
   display: inline-block;
   -webkit-animation: iconscale 1.2s 1 linear;
   -moz-animation: iconscale 1.2s 1 linear;
   -o-animation: iconscale 1.2s 1 linear;
   animation: iconscale 1.2s 1 linear;
   -webkit-transform-origin: center 100%;
   -moz-transform-origin: center 100%;
   -ms-transform-origin: center 100%;
   -o-transform-origin: center 100%;
   transform-origin: center 100%;
}