如何在父元素悬停时使fa图标旋转

<div class="parent">
  <i class="fa fa-icon"></i>
</div>

.parent {
  position: relative;
  width: 100px;
  height: 100px;
}

.fa-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s ease;
}

const parent = document.querySelector('.parent');
const icon = document.querySelector('.fa-icon');

parent.addEventListener('mouseover', () => {
  icon.style.transform = 'translate(-50%, -50%) rotate(180deg)';
});

parent.addEventListener('mouseout', () => {
  icon.style.transform = 'translate(-50%, -50%) rotate(0deg)';
});