font awesomeアニメーションスピナーの背景を介して

私はページを読み込むCSSの背景を介して素晴らしいスピンアイコンを使用しています。font awesomeアニメーションスピナーの背景を介して

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

アイコンがページで正常にレンダリングされたが、それは静的です。背景としてすばらしいフォントを使用してアニメーション紡績アイコンを使用するにはどうすればよいですか？親切にお手伝いします。

出典

2015-12-10 SatAj

正解：下記のように更新CSS。 Font Awesome Examplesによると

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

出典

2015-12-10 22:38:29 SatAj

できるだけ早くそれを受け入れることを忘れないでください。 – Berendschot

はい、私は自分の質問の回答を2日後に受け入れることができます。 – SatAj

他の回答（受け入れられた回答を含む）は、アイコンを背景画像として使用するためにCSSを活用したOPの特定のニーズに対処していません。この素晴らしいソリューションをありがとう！ – jyoseph

fa fa-spinner fa-spinを使用してください。

参照：Font Awesome Examples

例：

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

出典

2015-12-10 19:53:44 Berendschot

が ..動作しますが、私が説明するようにCSSの背景としてフォント素晴らしいアイコンを使用したいです私の質問で。 – SatAj

レイヤーを上に追加できますが、背景として 'テキスト'を設定することはできません。 – Berendschot

私は私の例で設定したように、 "content"プロパティを通してテキストを背景として設定できます。 – 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>

出典

2017-06-07 21:08:10

font awesomeアニメーションスピナーの背景を介して

答えて

関連する問題