 <p>As mentioned by Turnip there is -webkit filter for that. However it is more convenient to use SVG:</p> <pre><code>&lt;svg&gt; &lt;pattern id="mypattern" patternUnits="userSpaceOnUse" width="750" height="800"&gt; &lt;image width="750" height="800" xlink:href="https://placekitten.com/g/100/100"&gt;&lt;/image&gt; &lt;/pattern&gt; &lt;text x="0" y="80" class="fa fa-5x" style="fill:url(#mypattern);"&gt;&amp;#xf0f4;&lt;/text&gt; &lt;/svg&gt; </code></pre> <p>You just need to include icon character in SVG</p> <p><a href="https://jsfiddle.net/xd6gny56/" rel="nofollow">Demo fiddle</a></p>