carattere impressionante filatore animato attraverso lo sfondo

Sto usando font impressionante icona di rotazione attraverso sfondo CSS per il caricamento della pagina.carattere impressionante filatore animato attraverso lo sfondo

/* 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="[email protected]*" 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>

L'icona è il rendering con successo nella pagina, ma è una statica. Come posso usare l'icona di rotazione animata usando font fantastico come sfondo? Gentile aiuto.

fonte

2015-12-10 SatAj

corretta risposta: Aggiornamento CSS come indicato di seguito.

/* 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="[email protected]*" 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>

fonte

2015-12-10 22:38:29 SatAj

Non dimenticarti di accettarlo quando sarai in grado di farlo. – Berendschot

Sì, posso accettare la risposta della mia domanda solo dopo 2 giorni. – SatAj

Nessuna delle altre risposte, compresa la risposta accettata, affronta le esigenze specifiche dell'OP che era quella di sfruttare i css per utilizzare l'icona come immagine di sfondo. Grazie per questa grande soluzione! – jyoseph

È necessario utilizzare fa fa-spinner fa-spin.

See: Font Awesome Examples

Esempio:

/** 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>

fonte

2015-12-10 19:53:44 Berendschot

funzionerà .. Ma voglio utilizzare l'icona font-impressionante come sfondo CSS come descritto nella mia domanda – SatAj

È possibile aggiungere un livello in cima, ma non è possibile impostare "testo" come sfondo. – Berendschot

Possiamo impostare il testo come sfondo tramite la proprietà "content" come ho impostato nel mio esempio. – SatAj

Secondo Font Awesome Examples:

<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>

fonte

2017-06-07 21:08:10

carattere impressionante filatore animato attraverso lo sfondo

risposta

Problemi correlati