Ruotare freccia su clic del mouse

[Utonto Tonto]

Ciao ragazzi, come da titolo mi servirebbe unamano per far ruotare una freccia tramite JavaScript che devo ancora imparare.
La freccia è un'icona di Font Awsome e questo è il codice che ho provato a scrivere...e che ovviamente non funziona :

<i class="fas fa-angle-down" id="icon"></i>

var arrow = document.getElementById('icon');

arrow.onclick = function() {
arrow.style.transform = 'rotateX(180deg);
}

Se possibile vorrei far in modo che al primo clic ruoti di 180° e ricliccandola torni in posizione di partenza (rivolta verso il basso).

Grazie!

[m4rko80]

Ciao, dato che usi una libreria (version 4 o 5 non lo so) , come indicato qui al posto di agire sul css stesso potresti semplicemente aggiungere o togliere la classe del caso ad esempio come mostrato qui:
https://origin.fontawesome.com/how-t...rotating-icons

[Utonto Tonto]

Ma con il CSS non si può usare l'evento "onclick"...

[m4rko80]

Intendevo dire che sul click al posto di aggiugere regole css potresti aggiungere una classe che sicuramente se applicata farà quel che deve.

[Utonto Tonto]

Si ma il problema rimane sempre quello di fare lo script, al momento non ne capisco molto di JavaScript

[m4rko80]

Qui puoi vedere come fare nella manieria più classica se non usi jQuery
https://www.w3schools.com/howto/tryi...s_toggle_class

[Utonto Tonto]

Proverò, grazie!