如何使用JavaScript为Fontawesome图标着色？

Question

I have the following fa-icon :

<div id="notification">
    <div id="info">
        <div class="service">
            <i class="fas fa-music"></i>
            <h1 class="name"></h1>
        </div>
    </div>
</div>

I tried the following to color it with javascript:

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;

However none of them work, how could I achieve this?

Edit: it seems like it only works outside my function, why does it not work when its inside?

// 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) && 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
            });
        }
    }
}

Answer 1

Since 5.0 uses SVG try

document.querySelector('.fas fa-music').style.fill = Music;

If this does not work then you will have to select SVG inside and apply rule in it

Answer 2

Do something like

document.querySelector('.fa.fa-sign-in').style.color = "green"

You have a mistake in your selector. For your case, the correct line to modify the styles will be

document.querySelector('.fas.fa-music').style.color = "green"

Change "green" to your color

Answer 3

Did you try the following code?

document.querySelector('#info .service .fa-music').style.color = Music;

This one should also work:

document.querySelector('.fas.fa-music').style.color = Music;

It seems that you made a small mistake by writing ('.fas fa-music') .