如何在 JavaScript 中定位 Font 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>