JS kullanarak Font Awesome simgeleri nasıl canlandırılır?

Bu yüzden, birçoğunuz, span veya JQuery kitaplıklarını kullanarak "tasarlanan simgeler" ile çalışıyorsunuz, ancak Font Awesome simgelerini kullanıyorum ve bunu yapamıyorum.JS kullanarak Font Awesome simgeleri nasıl canlandırılır?

Sadece toggleClass JS kullanarak olabildiğince basitleştirmeye çalışıyorum, işte burada.

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

*{ 
 
    -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>

Bu düşünce bitti

kaynak

2016-03-24 N. Ayancan

'.action' başka hiçbir karakter iki eleman arasında yer alıyor aynı şekilde çalışır – Malk

' # menunav.action' olmalıdır #menunav. –

Hayır, hem sınıf hem de Kimlik atanmış olarak yalnızca 1 öğe olmadığından değil. – Malk

, bkz keman: 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'); 
    }); 
    });

kaynak

2016-03-24 18:04:23

Overthink, hayatımın problemi. Teşekkürler adamım, istediğim gibi çalışır. –

JS kullanarak Font Awesome simgeleri nasıl canlandırılır?

cevap

İlgili konular