FontAwesome Spinnerを再作成

Question

私のプロジェクトでは、FontAwesomeのアイコンが表示されないユーザーもいますが、私の側から見ることができます。今

<span class"faCog"></span> 

.faCog { 
    &:before { 
    font-family: 'FontAwesome'; 
    content: '\f013'; 
    } 
} 

私の問題を使用して、一部のユーザーはそれらを見ることができない、ので

は

<i class="fa fa-cog"> 

、私はコードの上に移行したということです。

私はこのようなフォント素晴らしいアイコンを使用していました私はコグを回転させたいが、それを動かすことはできない。私は

<i class="fa fa-cog fa-spin fa-1x fa-fw"> 

を行うことだけができた前に私は私のfaCogクラスにこれを追加することを試みたが、何のサイコロ

&:after { 
    transform: rotate(180deg); 
    transform-origin: 50% 50%; 
} 

私の目標は、スピンの歯車アイコンを持つことはありません。

Answer 1

アニメーションを使用する必要があります。これをチェックしてください：あなたはこの作品を作るためのスピニングアニメーションを作成する必要がhttps://www.w3schools.com/css/css3_animations.asp

.faCog.spin:before { 
 
    font-family: 'FontAwesome'; 
 
    content: '\f013'; 
 
    display: inline-block; 
 
    animation-name: spin; 
 
    animation-duration: 5000ms; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 
@keyframes spin { 
 
    from { 
 
     transform:rotate(0deg); 
 
    } 
 
    to { 
 
     transform:rotate(360deg); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<span class="faCog spin"></span>

Answer 2

。

.faCog { 
 
    display: inline-block; 
 
    -webkit-animation: spin 2s infinite linear; 
 
    -moz-animation: spin 2s infinite linear; 
 
    -o-animation: spin 2s infinite linear; 
 
    animation: spin 2s infinite linear; 
 
} 
 
.faCog:before { 
 
    font-family: 'FontAwesome'; 
 
    content: '\f013'; 
 
    } 
 

 
@-moz-keyframes spin { 
 
    0% { 
 
    -moz-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -moz-transform: rotate(359deg); 
 
    } 
 
} 
 

 
@-webkit-keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(359deg); 
 
    } 
 
} 
 

 
@-o-keyframes spin { 
 
    0% { 
 
    -o-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -o-transform: rotate(359deg); 
 
    } 
 
} 
 

 
@-ms-keyframes spin { 
 
    0% { 
 
    -ms-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -ms-transform: rotate(359deg); 
 
    } 
 
} 
 

 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(359deg); 
 
    } 
 
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 
 
<p> 
 
    <strong>Normal Icon</strong> 
 
    <br/> 
 
    <i class="fa fa-cog fa-spin"></i> 
 
</p> 
 
<p> 
 
    <strong>Custom Icon</strong> 
 
    <br/> 
 
    <span class="faCog"></span> 
 
</p>