제목 그대로입니다.

메뉴에 마우스오버시에만 fontawesome 나오게 스타일을 짤 수 있나요?

예시)

마우스아웃시

<li><a href="#">서브메뉴1</a></li>

마우스오버시

<li><i class="fas fa-caret-right" aria-hidden="true"></i><a href="#">서브메뉴1</a></li>

<div id="navi">
 <ul class="menu">
  <li><a href="#">메인메뉴1</a>
   <ul class="sub">
    <li><a href="#">서브메뉴1</a></li>
    <li><a href="#">서브메뉴2</a></li>
    <li><a href="#">서브메뉴3</a></li>
    <li><a href="#">서브메뉴4</a></li>
    <li><a href="#">서브메뉴5</a></li>
   </ul>
  </li>
  <li><a href="#">메인메뉴2</a></li>
  <li><a href="#">메인메뉴3</a>
   <ul class="sub">
    <li><a href="#">난방공사</a></li>
    <li><a href="#">냉방공사</a></li>
    <li><a href="#">철거</a></li>
    <li><a href="#">칸막이/천정</a></li>
    <li><a href="#">전기공사</a></li>
   </ul>
  </li>
  <li><a href="#">메인메뉴4</a></li>
 </ul>
</div>