CSS: -webkit-mask-image on Firefox
<p>I found an open source project that I was considering using for my website  However the project is dead and it is not fully cross browser compatible.  As a web developer noob, I'm stumped on how to fix it. The issue is with -webkit-mask-image which, according to MDN, is non-standard and therefore not supported on Firefox.  </p>

<p><a href="https://github.com/c2prods/Project-Tyson/" rel="nofollow">Here</a> is the project on github and <a href="http://www.come.ninja/Project-Tyson/" rel="nofollow">here</a> is a live demo of the code.</p>

<p>The issue is with the page navigation.  Specifically, this is the chunk of code in question.  This works fine on Chrome and Safari.  Doesn't work on Firefox.</p>

<pre><code>&lt;button id="btn1" class="active" data-vin="view-home"&gt;
    &lt;div class="btn-icon" style="-webkit-mask-image:url(img/icons/user.svg);"&gt;&lt;/div&gt;
    &lt;div class="label"&gt;Home&lt;/div&gt;
&lt;/button&gt;
</code></pre>

<p>Any ideas how to modify this to work on Firefox?  I see documentation on MDN for mask and mask-image.  I think this is the answer, but I can't get it to work correctly.</p>

<p>Thank you in advance for your help.</p>