spinners mini attribute css3 font-awesome-3.2

css3 - mini - fuente impresionante animado spinner a través del fondo



loading spinner (3)

Fuente Awesome 4.7

fa base fuente impresionante clase

fa-spinner que diseño de hilandero utilizar

fa-spin gira el icono

fa-3x solo aumenta el tamaño del icono

fa-fw solo hace que el icono se arregle con

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

Fuente impresionante 5+

fa-3x solo aumenta el tamaño de los iconos

Clase base de fuente impresionante para iconos sólidos

fa-spinner que diseño de hilandero utilizar

fa-spin gira el icono

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <div class="fa-3x"> <i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i> <i class="fas fa-cog fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i> <i class="fas fa-stroopwafel fa-spin"></i> </div>

Font Awesome 5 Spinner documentación:

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

Fuente Awesome 5 Spinner Icon list:

https://fontawesome.com/icons?c=spinners

Estoy utilizando el icono de fuente impresionante giro a través de fondo CSS para cargar la página.

/* Styles go here */ .loading-icon { position: relative; width: 20px; height: 20px; margin:50px auto; } .loading-icon:before { content: "/f110"; font-family: FontAwesome; font-size:20px; position: absolute; top: 0; }

<!DOCTYPE html> <html> <head> <link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="loading-icon"></div> </body> </html>

El icono se está mostrando correctamente en la página, pero es una estática. ¿Cómo puedo usar el ícono giratorio animado usando una fuente impresionante como fondo? Ayudar amablemente.


Respuesta correcta: Actualice CSS como se indica a continuación.

/* Styles go here */ .loading-icon { position: relative; width: 20px; height: 20px; margin:50px auto; -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .loading-icon:before { content: "/f110"; font-family: FontAwesome; font-size:20px; position: absolute; top: 0; }

<!DOCTYPE html> <html> <head> <link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="loading-icon"></div> </body> </html>


Usted debe usar fa fa-spinner fa-spin .

Ver: Ejemplos de fuentes impresionantes

Ejemplo:

/** CSS **/ @import url(''https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css'');

<!-- HTML --> <div class="fa fa-spinner fa-spin"></div>