Question

我在我的 Angular 应用程序中使用了 Font Awesome，我试图在点击刷新图标时旋转它。

<div class="col-5 d-flex justify-content-end"> 
   <span class="mr-4 pr-3">
      <fa-icon
         style="color: white; font-size: large; top: 0;"
         [icon]="faArrowAltCircleDown"
         (click)="refreshTaskList()">
      </fa-icon>
   </span>
</div>

我尝试添加 rotate="360" 和 transform="rotate-90"，但不幸的是都没有成功。

我愿意接受建议。

Answer 1

您只能为此使用 CSS，不需要 Angular：

button:focus i {
  animation: rotate 1s ease-in-out 0s;
}

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

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

<button class="btn btn-primary btn-sm" type="button"><i class="fa fa-play"></i></button>

您可以使用上面的代码并将其转换为您想要的结果。

来源：Angular Button click rotate icon

相关问题（Temani Afif的评论）：Font Awesome 5 How to arrange different icons?

Answer 2

给你...

这可以用 jQuery 来完成。我的回答与另一个不同，因为动画直接应用于字体真棒图标而不是 <button> 或任何其他标签，如您所愿。

$(document).ready(function() {
  $('.fa-arrow-alt-circle-down').on('click', function() {
    $('.fa-arrow-alt-circle-down').css( {
      'transform': 'rotate(360deg)', 'transition': 'all 2s ease-in-out'
    });
  });
});

.fa-arrow-alt-circle-down {
    font-size: 5vw !important;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='https://use.fontawesome.com/releases/v5.15.3/js/all.js' data-auto-replace-svg='nest'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</head>

<body>

  <i class='fas fa-arrow-alt-circle-down'></i>

</body>

</html>

旋转 fa-icon 元素

2 个答案: