如何使用 JS 为 Font Awesome 图标制作动画?
How to animate Font Awesome icons using JS?
所以,我看到你们中的很多人使用 span 或 JQuery 库与 "designed icons" 合作,但我使用的是 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>
你想多了,看fiddle: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');
});
});
所以,我看到你们中的很多人使用 span 或 JQuery 库与 "designed icons" 合作,但我使用的是 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>
你想多了,看fiddle: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');
});
});