Fork me on GitHub

Metro Icon Animation

Fancy animations for Metro UI.
Metro Icon Font gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Metro Icon Font includes over 400 icons.

How to use

Include in page head:

                <link href="metro-icons.css" rel="stylesheet">
                <link href="metro-ani-icons.css" rel="stylesheet">
In html use:

                <span class="mif-icon_name mif-ani-animation_name"></span>

To change size icon you can use next classes: mif-lg, mif-2x, mif-3x, mif-4x.

Icons can be resized to any sizes over built-in classes 

                <span class="mif-earth mif-2x"></span>

To change icon color you can use fg-* classes or use css property color. 


                <span class="mif-earth fg-green"></span>
                <span class="mif-earth" style="color: red;"></span>

Icons

Below is an example of animations that you can now use.

Spinner icons

Animated Spinner icons (with subclass mif-ani-spin)
Animated Spinner icons (with subclass mif-ani-pulse)
 Animated Spinner icons (with subclass mif-ani-pulse2) New

Animated icons New

Normal speed
Fast speed (with subclass mif-ani-fast)
Slow speed (with subclass mif-ani-slow)
On hover