| layout | permalink | title | description | keywords |
|---|---|---|---|---|
page |
/duotone-icons/ |
Duotone icons with font awesome |
Code examples of font awesome duotone icons |
duotone icons font awesome |
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:
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:
<script src="https://kit-pro.fontawesome.com/releases/v5.10.1/js/pro.min.js" data-auto-fetch-svg></script>
===