xxxxxxxxxx
<a href="/users/edit"><i class="fa fa-cog" style="color:black !important;"></i> Edit profile</a>
xxxxxxxxxx
<!-- Assuming you have included Font Awesome CSS -->
<span class="fa fa-heart" id="my-icon"></span>
<!-- CSS -->
<style>
/* Select the icon by class or ID */
.fa-heart {
color: red; /* Change the color to red */
}
#my-icon {
color: blue; /* Change the color to blue */
}
</style>
xxxxxxxxxx
<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
xxxxxxxxxx
<!-- 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>