Duotone icons

A very cool thing about font awesome v5 is that we can now make icons with multiple colors. And, the nice thing is, this is not all predefined. Its very easy to manipulate this.

Did you ever need a on/off button with 2 tones? Font awesome has you covered:

How do you do this:

To start, you need font awesome. Add this to you’re html:


<i class="fad fa-coffee-togo fa-fw fa-3x"></i>

Now lets add some magic:


<i class="fad fa-coffee-togo fa-fw fa-3x" style="--fa-primary-color: rgb(225,19,131); --fa-secondary-color: rgb(245,130,31);"></i>

We have two options here, we set the primary and secondary color of this icon. The result is this:

===