如何在JavaScript中定位Awesome 5 svg字体图标？

Question

它在页面加载后呈现，但我不知道如何定位。它包裹在一个锚定标记中，我尝试将该锚定标记的z-index设置为9999，因此它位于图标上方，我可以定位到该目标，但它也不起作用。

 <nav class="menu">
        <div class="icon-list">
          <a class="highlight" href="#szolgáltatásaim"><i class="far fa-bell"></i><span>Szolgáltatásaim</span></a>
          <a class="highlight" href="#rólam"><i class="far fa-user"></i><span>Rólam</span></a>
          <a class="highlight" href="#munkáim"
          ><i class="far fa-folder-open"></i><span>Munkáim</span></a>
        <a class="highlight" href="#oktatás">
        <i class="fas fa-chalkboard"></i><span>Oktatás</span></a>
        <a class="highlight" href="#árak"
        ><i class="far fa-bookmark"></i><span>Árak</span></a >
          <a class="highlight" href="#marketing"
            ><i class="far fa-lightbulb"></i><span>Marketing</span></a>

          <a class="highlight" href="#üzenet"
            ><i class="far fa-envelope"></i><span>Üzenet</span></a>
          </div>
       </nav> 

Answer 1

我认为您的问题需要更多细节，因此我们可以为您提供更好的帮助。话虽如此，如果您要定位多个元素，请使用class。如果您要定位一个特定元素，请使用ID。为此，您需要将此类属性添加到html代码中的<i>图标中。这是一个示例片段。这是您需要的吗？

function changeAll() {
	var elements = document.querySelectorAll('.far,.fas'); // To target multiple elements use class
	for(var i = 0; i < elements.length; i++){
		elements[i].style.color = "red";
	}
}
function changeBell() {
  document.getElementById("bell").style.color = "green"; // To target one specific element use ID
}

<script async src="https://kit.fontawesome.com/0f49cf42f1.js" crossorigin="anonymous"></script>
<nav class="menu">
  <div class="icon-list">
    <a class="highlight" href="#szolgáltatásaim"><i class="far fa-bell" id="bell"></i><span>Szolgáltatásaim</span></a>
    <a class="highlight" href="#rólam"><i class="far fa-user"></i><span>Rólam</span></a>
    <a class="highlight" href="#munkáim"><i class="far fa-folder-open"></i><span>Munkáim</span></a>
    <a class="highlight" href="#oktatás">
      <i class="fas fa-chalkboard"></i><span>Oktatás</span></a>
    <a class="highlight" href="#árak"><i class="far fa-bookmark"></i><span>Árak</span></a >
          <a class="highlight" href="#marketing"
            ><i class="far fa-lightbulb"></i><span>Marketing</span></a>

    <a class="highlight" href="#üzenet"><i class="far fa-envelope"></i><span>Üzenet</span></a>
  </div>
</nav>
<br>
<button type="button" onclick="changeAll()">Change color of all icons</button>
<br>
<button type="button" onclick="changeBell()">Change color of bell only</button>