FontAwesome Spinner 다시 만들기

Question

내 프로젝트에서 일부 사용자는 FontAwesome 아이콘을 볼 수 없지만 필자는이를 끝까지 볼 수 있습니다. 지금

<span class"faCog"></span> 

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

내 문제를 사용하는 일부 사용자가 볼 수없는, 때문에

이

<i class="fa fa-cog"> 

, 나는 위의 코드 전환 된 것입니다 :

나는이 같은 글꼴 멋진 아이콘을 사용했다 나는 그 톱니 바퀴를 돌리기를 원하지만 나는 그것을 작동시킬 수 없다. 나는 내 FACOG 클래스에이 추가 시도

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

할 만 할 수 있었다하지만, 전에없이 주사위

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