FontAwesome Icons - ne peut pas changer la classe css de JavaScript dans IE7

Question

J'ai la font-awesome-ie7.min.css dans mon html, mais je suis incapable de changer la classe d'icône dynamiquement à l'aide JavaScript/jQuery dans IE7, fonctionne très bien dans d'autres navigateurs.

<div id='iconDiv'> 
    <i class='icon-hand-down'></i> 
</div> 
<script> 
    $(document).ready(function() { 
     $('#iconDiv i').addClass('icon-hand-up'); 
    }); 
</script> 

Toute aide! apprécié.

Answer 1

Woohoo! J'ai une solution à ce problème ennuyeux. Comme avec tous les codes qui cible IE7 c'est un bidouille complet mais bon, ça marche ...

<div id='iconDiv'> 
    <i class='icon-hand-down'></i> 
    <i class='icon-hand-up hide'></i><!-- initially hidden --> 
</div> 
<script> 
    $(document).ready(function() { 
     $('#iconDiv i.icon-hand-down').addClass('hide'); 
     $('#iconDiv i.icon-hand-up').removeClass('hide'); 
    }); 
</script> 

Placez les deux icônes dans votre DOM et afficher certaines conditions selon ce qui convient. Vous avez eu l'idée. J'utilise cette même approche pour basculer dans mon application.

CSS Exemple de bootstrap:

.hide { 
    display: none; 
} 

.show { 
    display: block; 
} 

Pour référence, dans mon cas, je me sers AngularJS:

<i data-ng-click="collapsed = !collapsed" class="icon-collapse ng-class:{'hide':collapsed}"></i> 
<i data-ng-click="collapsed = !collapsed" class="icon-collapse-top ng-class:{'hide':!collapsed}"></i>