如何防止我的微調框內的圖標旋轉？

Question

我創建了一個帶有暫停圖標的微調框。目前它工作正常，但暫停圖標似乎與其他微調器一起旋轉。我不想讓它旋轉。但我希望帶有橙色圓圈的微調器繼續旋轉。我怎麼樣？

這是我在plnkr

<span class="spinner fa-spin"> 
     <i class="fa fa-pause fa-inverse fa-lg"> </i> 
    </span> 


    <style> 
     .spinner { 
      height: 40px; 
      width: 40px; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin: -20px -20px 0 0; 
      border: 3px solid #F2B049; 
      border-top: 3px solid #E6FFFC; 
      border-left: 3px solid #E6FFFC; 
      background-color: #1FBBA6; 
      border-radius: 100%; 
      text-align: center; 
      line-height: 40px; 
     } 
    </style> 

Answer 1

代碼解決。這是plunkr和相關的代碼。如果您有關於如何改善此問題的建議，請告訴我。 ：D

Correct: 
    <Br/> 
    <div class="spinner-wrapper relative"> 
     <span class="spinner fa-spin inline-block" ></span> 
     <div class="put-on-top"> 
     <i class="fa fa-pause fa-inverse fa-lg"></i> 
     </div> 
    </div> 

    <style> 
     .relative { 
     position: relative; 
     } 
     .put-on-top { 

     position: absolute; 
     width: 100%; 
     height: 100%; 
     top: 0; 
     left: 0; 
     line-height: 45px; 
     text-align: center; 
     } 
     .spinner-wrapper { 

     display: inline-block; 
     } 
     .inline-block { 
     display: inline-block; 
     } 
     .spinner { 
      height: 40px; 
      width: 40px; 
      border: 3px solid #F2B049; 
      border-top: 3px solid #E6FFFC; 
      border-left: 3px solid #E6FFFC; 
      background-color: #1FBBA6; 
      border-radius: 100%; 
      text-align: center; 
      line-height: 40px; 
     }