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

Question

It renders after the page loads but I have no idea how I can target that. It's wrapped in an anchor tag and I tried to set the z-index of that anchor tag to like 9999 so it's goes above the icon and I can target that but it's not working either.

 <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

I think your question needs more details so we can help you better. That being said, if you're trying to target multiple elements use class. If you're trying to target one specific element use ID. For this to work you'll need to add such properties to your <i> icons in your html code. Here's an example snippet. Is this what you need?

 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>