title: Font Awesome is not working in html shadow DOM
body: <p>I want to try Font Awesome icon fonts in Shadows DOM ,like this :</p>
  
  <pre><code>&lt;script type="module"&gt;
  var str = 
  `
  &lt;link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"&gt;
  &lt;nav&gt;
    Icon:&lt;button class="button-icon icon-heart"&gt;Click Me!&lt;/button&gt;
  &lt;/nav&gt;
  &lt;style&gt;
  
  &lt;/style&gt;
  `;
  function make (){
      const template = document.createElement('template');
      template.innerHTML = str 
      class RCounter extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({ mode: 'open' });
          this.shadowRoot.appendChild(template.content.cloneNode(true));
        }
      }
      window.customElements.define('r-demo', RCounter);
  }
  make()
  &lt;/script&gt;
  &lt;body&gt;
      &lt;h1&gt;normal&lt;/h1&gt;
      &lt;r-demo&gt;&lt;/r-demo&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>But the icon heart is not show on the button.Why ? Any suggestion is expected ,thanks.</p>
  
  <p>BTW: I use http-server to serve these files ,you can install it by :</p>
  
  <pre><code>   node i http-server -g 
  </code></pre>