title: Next.js with FortAwesome and SSR
body: <p>I am building a <a href="https://nextjs.org" rel="noreferrer">Next.js</a> application and looking for an icon package that works with its SSR paradigm.</p>
  
  <p>After trying a few libs, I'm now working with <a href="https://github.com/FortAwesome/react-fontawesome" rel="noreferrer">FortAwesome/react-fontawesome</a>, which looks promising.</p>
  
  <p>The problem is when the page loads the icons are large (unstyled) and then suddenly they are styled properly. I'm trying to figure out how to get these to style server-side.</p>
  
  <p>I've seen folks <a href="https://spectrum.chat/next-js/general/integrate-react-fontawesome-on-nextjs~08e5a9fa-9920-4925-a6d2-738e7fe851a8" rel="noreferrer">talk about</a> importing a stylesheet provided by FortAwesome:</p>
  
  <pre><code>import '@fortawesome/fontawesome-svg-core/styles.css';
  </code></pre>
  
  <p>However, I'm unsure which file(s) this should be done in and also, Next complains when I try this:</p>
  
  <blockquote>
    <p>[ error ] ./node_modules/@fortawesome/fontawesome-svg-core/styles.css
    1:8 Module parse failed: Unexpected token (1:8) You may need an
    appropriate loader to handle this file type, currently no loaders are
    configured to process this file</p>
  </blockquote>
  
  <p>I've looked at the <a href="https://github.com/zeit/next-plugins/tree/master/packages/next-css" rel="noreferrer">CSS plugin</a>, but this also seems like a red herring.</p>
  
  <p>How can I get the font-awesome icons in this package to be styled on the server with Next.js?</p>