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 个答案: