How to change the color of the default black Font Awesome icons

  • You can add the color to the HTML element as follows:

<i class="fa fa-car" style="color:#DDDDDD;"><!-- icon --></i>

  • You can also change the size of the icon as follows:

<i class="fa fa-car fa-lg" style="color:#DDDDDD;"><!-- icon --></i>

<i class="fa fa-car fa-4x" style="color:#DDDDDD;"><!-- icon --></i>

  • You can also make site-wide changes with CSS as follows:

.fa {
color: black;
}
.fa-car {
color: red;
}
.fa-bus {
color: green;
}

Leave a Reply

Your email address will not be published. Required fields are marked *