title: How to add a background image to a font awesome icon?
body: <p>I want to make the coloring of the icon an image. So instead of it being purple or something, it is the image. I hope that makes sense! </p>
  
  <p>I have this code: </p>
  
  <pre><code>&lt;span class="fa fa-coffee fa-5x coffee" aria-hidden="true"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>and the class:</p>
  
  <pre><code>.coffee {
  background: url("https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");
  }
  </code></pre>
  
  <p>but this just changes the area around the icon to that image, not the inside. </p>
  
  <p>Here's the whole page, the icon I'm trying to modify is the coffee cup: <a href="http://codepen.io/l-emi/pen/QNZevb" rel="nofollow">http://codepen.io/l-emi/pen/QNZevb</a></p>
  
  <p>Thanks!</p>