我想添加一个链接列表中的每个链接前添加Font Awesome图标，然后在链接悬停时通过将其移动到右侧来仅设置图标的动画

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<ul id="link-list">
  <li><a href="https://example.com">Link 1</a></li>
  <li><a href="https://example.com">Link 2</a></li>
  <li><a href="https://example.com">Link 3</a></li>
</ul>

<ul id="link-list">
  <li><i class="fas fa-link"></i><a href="https://example.com">Link 1</a></li>
  <li><i class="fas fa-link"></i><a href="https://example.com">Link 2</a></li>
  <li><i class="fas fa-link"></i><a href="https://example.com">Link 3</a></li>
</ul>

#link-list li {
  position: relative;
  padding-left: 20px;
}

#link-list li i {
  position: absolute;
  left: 0;
  transition: transform 0.3s ease-in-out;
}

#link-list li:hover i {
  transform: translateX(10px);
}