如何使用JS为Font Awesome图标设置动画？

Question

因此，我看到很多人使用span或JQuery库使用“设计的图标”，但是我使用的是Font Awesome图标，但我无法使这一功能正常工作。

我只是想使用toggleClass JS使其尽可能简单，所以就到这里了。

 $(document).ready(function(){ $('#menunav').click(function(){ $(this).toggleClass('action'); }); });

 *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } #menunav{ padding: 40px; width: 30%; font-size: 50px; cursor: pointer; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } #menunav i{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } #menunav .action i{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="burguer-style.css"> <!--font awesome library--> <link rel="stylesheet" href="css/font-awesome.min.css"> <script src="jquery-1.11.3.js"></script> <script src="burguer-action.js" type="text/javascript"></script> </head> <body> <div id="menunav"> <i class="fa fa-navicon"></i> </div> </body> </html>

Answer 1

您已经过分考虑了，请参阅小提琴： https : //jsfiddle.net/36zo44md/

html

<div id="menunav">
  <i id="faIcon" class="fa fa-navicon"></i>
</div>

的CSS

#menunav{
        padding: 40px;
        width: 30%;
        font-size: 50px;
}

.fa-rotate-90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

javascript

  $(document).ready(function() {
    $('#faIcon').click(function() {
      $(this).toggleClass('fa-rotate-90');
    });
  });

如何使用JS为Font Awesome图标设置动画？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-03-24 18:04:23

如何使用JS为Font Awesome图标设置动画？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-03-24 18:04:23

解决方案1
0 已采纳 2016-03-24 18:04:23