FontAwesome 2 SVG

Transforme QUALQUER ícone do FontAwesome em SVG.

Input

Preview

Escolha seu icone aqui.

Output

Histórico

Agora temos uma extensão para Chrome e variantes, clique aqui para instalar.

CSS

Normalizar tamanho

.svg-inline--fa {
    display: inline-block;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
}

Animação de spin

.fa-spin {
    animation: fa-spin 2s infinite;
}
@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Animação de spin reverso

.fa-spin-reverse {
    animation: fa-spin-reverse 2s infinite linear;
}
@keyframes fa-spin-reverse {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-359deg);
    }
}

Animação de spin pausado

.fa-spin-pulse {
    animation: fa-spin-pulse 1s infinite steps(8);
}
@keyframes fa-spin-pulse {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

Animação de batimento

.fa-beat {
    animation: fa-beat 1s infinite alternate;
}
@keyframes fa-beat {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.25);
    }
}

Animação de fade

.fa-fade {
    animation: fa-fade 1s infinite alternate;
}
@keyframes fa-fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: .4;
    }
}

Animação de fade com batimento

.fa-beat-fade {
    animation: fa-beat-fade 1s infinite alternate;
}
@keyframes fa-beat-fade {
    0% {
        transform: scale(1);
        opacity: .5;
    }
    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}

Animação de salto

.fa-bounce {
    animation: fa-bounce 1s infinite alternate;
}
@keyframes fa-bounce {
    0% {
        transform: scale(1) translateY(0);
    }
    10% {
        transform: scale(1.1, 0.9) translateY(0);
    }
    30% {
        transform: scale(0.9, 1.1) translateY(-0.5em);
    }
    50% {
        transform: scale(1.05, 0.95) translateY(0);
    }
    57% {
        transform: scale(1) translateY(-0.125em);
    }
    64% {
        transform: scale(1) translateY(0);
    }
    to {
        transform: scale(1) translateY(0);
    }
}

Animação de giro

.fa-flip {
    animation: fa-flip 1s infinite alternate;
}
@keyframes fa-flip {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

Animação de sacudir

.fa-beat-fade {
    animation: fa-beat-fade 1s infinite alternate;
}
@keyframes fa-beat-fade {
    0% {
        transform: scale(1);
        opacity: .5;
    }
    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}