title: Font-awesome icons are shown as squares
body: <p>I've tried to use icons from <a href="http://fontawesome.io/" rel="nofollow noreferrer">font-awesome</a> and from <a href="http://lipis.github.io/bootstrap-social/" rel="nofollow noreferrer">social-buttons</a> libraries, but they are shown as squares:</p>
  
  <p><img src="https://i.stack.imgur.com/x9Tvo.png" alt="No icons"></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;a class="btn btn-social-icon btn-google-plus"&gt;&lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a class="btn btn-social-icon btn-vk"&gt;&lt;i class="fa fa-vk"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a class="btn btn-social-icon btn-twitter"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a class="btn btn-social-icon btn-facebook"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>Output .xhtml file contains:</strong></p>
  
  <pre><code>&lt;head&gt;
  &lt;link type="text/css" rel="stylesheet" href="/WebAcademy/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo"&gt;
  &lt;link type="text/css" rel="stylesheet" href="/WebAcademy/javax.faces.resource/bootstrap-3.2.0/css/bootstrap.min.css.xhtml?ln=styles"&gt;
  &lt;link type="text/css" rel="stylesheet" href="/WebAcademy/javax.faces.resource/font-awesome-4.1.0/css/font-awesome.css.xhtml?ln=styles"&gt;
  &lt;link type="text/css" rel="stylesheet" href="/WebAcademy/javax.faces.resource/bootstrap-social-gh-pages/bootstrap-social.css.xhtml?ln=styles"&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>So, I suppose, css libs are imported.</p>
  
  <p>Also I have in my <em>web.xml</em> MIME-mappings:</p>
  
  <pre><code>&lt;mime-mapping&gt;
      &lt;extension&gt;eot&lt;/extension&gt;
      &lt;mime-type&gt;application/vnd.ms-fontobject&lt;/mime-type&gt;
  &lt;/mime-mapping&gt;
  &lt;mime-mapping&gt;
      &lt;extension&gt;otf&lt;/extension&gt;
      &lt;mime-type&gt;font/opentype&lt;/mime-type&gt;
  &lt;/mime-mapping&gt;
  &lt;mime-mapping&gt;
      &lt;extension&gt;ttf&lt;/extension&gt;
      &lt;mime-type&gt;application/x-font-ttf&lt;/mime-type&gt;
  &lt;/mime-mapping&gt;
  &lt;mime-mapping&gt;
      &lt;extension&gt;woff&lt;/extension&gt;
      &lt;mime-type&gt;application/x-font-woff&lt;/mime-type&gt;
  &lt;/mime-mapping&gt;
  &lt;mime-mapping&gt;
      &lt;extension&gt;svg&lt;/extension&gt;
      &lt;mime-type&gt;image/svg+xml&lt;/mime-type&gt;
  &lt;/mime-mapping&gt;
  </code></pre>
  
  <p>Any ideas why icons are shown as empty squares?</p>
  
  <p>Thanks in advance.</p>