font awesome animasyonlu bir arka plana sahip spinner

Sayfayı yüklemek için CSS arka planından yazı tipi harika döndürme simgesi kullanıyorum. font awesome animasyonlu bir arka plana sahip spinner

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

simge sayfasında başarıyla render, ancak statik olduğunu. Arka plan olarak harika yazı tipini kullanarak animasyonlu eğirme simgesini nasıl kullanabilirim? Lütfen yardımcı olun.

kaynak

2015-12-10 SatAj

Doğru cevap: Aşağıda verilen Güncelleme CSS. Font Awesome Examples göre

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

kaynak

2015-12-10 22:38:29 SatAj

Yapabileceğin zaman kabul etmeyi unutma. – Berendschot

Evet, kendi sorumu yanıtlamayı ancak 2 gün sonra kabul edebilirim. – SatAj

Kabul edilen cevap da dahil olmak üzere diğer cevapların hiçbiri, OP'nin, arka plan görüntüsü olarak simgeyi kullanmak için css'den yararlanan özel ihtiyaçlarını ele almaz. Bu harika çözüm için teşekkürler! – jyoseph

fa fa-spinner fa-spin kullanmalısınız.

Bkz: Font Awesome Examples

Örnek:

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

kaynak

2015-12-10 19:53:44 Berendschot

.. çalışacaktır Ama açıklandığı gibi bir CSS arka plan olarak font-müthiş simgesini kullanmak istiyorum benim soruma – SatAj

Üstte bir katman ekleyebilirsiniz, ancak 'metni' arka plan olarak ayarlamak mümkün değildir. – Berendschot

Örneğimde belirttiğim gibi, "içerik" özelliği aracılığıyla metni arka plan olarak ayarlayabiliriz. – SatAj

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

kaynak

2017-06-07 21:08:10

font awesome animasyonlu bir arka plana sahip spinner

cevap

İlgili konular