F
ont
A
wesome
To SVG
F
ont
A
wesome
Pro
Transforme QUALQUER ícone do FontAwesome em SVG.
Input
Ícone tipo HTML
ex: <i class="fa-solid fa-house"></i>
Preview
Escolha seu icone
aqui
.
Output
Histórico
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; } }