HTML

css change font awesome icon color

<a href="/users/edit"><i class="fa fa-cog" style="color:black !important;"></i> Edit profile</a>

css change font awesome icon color

.fa {
    color: red !important;
}

ADJUST color fontawesome icon

<i class="fab fa-js" style="color:red"></i>

css change font awesome icon color

.<fa-icon-class> { color: red !important; }

how to change color of font awesome icons

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

font awesome change background color stacked

<!-- Create an icon wrapped by the fa-stack class -->
<span class="fa-stack">
    <!-- Change color of the icon that will wrap the number -->
    <span class="fa fa-square fa-stack-2x" style="color:red;"></span>
    <!-- a strong element with the custom content, in this case a number -->
    <strong class="fa-stack-1x">
        1    
    </strong>
</span>