title: How do I color a fontawesome icon with javascript?
body: <p>I have the following <code>fa-icon</code>:</p>
  
  <pre><code>&lt;div id="notification"&gt;
      &lt;div id="info"&gt;
          &lt;div class="service"&gt;
              &lt;i class="fas fa-music"&gt;&lt;/i&gt;
              &lt;h1 class="name"&gt;&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried the following to color it with javascript:</p>
  
  <pre><code>var Music = (swatches.DarkVibrant.getHex());
  document.getElementById("info").getElementsByClassName("service")[0].style.color = Music;
  
  // Gave i element this id
  document.querySelector('#music').style.color = Music;
  document.querySelector('.fas fa-music').style.color = Music;
  </code></pre>
  
  <p>However none of them work, how could I achieve this?</p>
  
  <p>Edit: it seems like it only works outside my function, why does it not work when its inside?</p>
  
  <pre><code>// Works
  document.querySelector('.fas').style.color = "blue"
  
  function mainUpdate(type) {
      if (type == "music") {
          if (isplaying) {
              document.querySelector('.name').innerHTML = "Now playing";
              document.querySelector('.details').innerHTML = "• " + album;
              document.querySelector('.song').innerHTML = title;
              document.querySelector('.artist').innerHTML = artist;
              var milli = new Date().getMilliseconds();
              var albumart = document.querySelector("#artworkImage");
              albumart.src = "/var/mobile/Documents/Artwork.jpg?" + milli;
              albumart.addEventListener('load', function () {
                  var vibrant = new Vibrant(albumart);
                  var swatches = vibrant.swatches()
                  for (var swatch in swatches)
                      if (swatches.hasOwnProperty(swatch) &amp;&amp; swatches[swatch]) {
                          var Name = (swatches.DarkVibrant.getHex());
                          var Music = (swatches.DarkVibrant.getHex());
                      }
                  document.querySelector('.name').style.color = Name; // Works
                  document.querySelector('.fas').style.color = "blue" // Doesnt work
              });
          }
      }
  }
  </code></pre>