title: How to make Font awesome 5 work with webpack
body: <p>I'm trying to use Fontawesome in my Flask/webpack project.</p>
  
  <p>The craziest thing is some point it worked then stopped, I changed something stupid, it worked again and finally it stopped working completely.</p>
  
  <p>What I have:</p>
  
  <p>package config:</p>
  
  <pre><code>  "devDependencies": {
          ...
          "css-loader": "^1.0.0",
          "node-sass": "^4.9.3",
          "sass-loader": "^7.1.0",
          "style-loader": "^0.23.0",
          "webpack": "^4.19.0",
          "webpack-cli": "^3.1.0",
          "webpack-merge": "^4.1.4"
      },
      "dependencies": {
          "@fortawesome/fontawesome-free": "^5.3.1",
          "bootstrap": "^4.1.3",
           ...
      }
  </code></pre>
  
  <p>webpack config (rules section):</p>
  
  <pre><code>   test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
          use: [{
              loader: 'file-loader',
              options: {
              name: '[name].[ext]',
              outputPath: '../fonts/',  
              publicPath: '../static/fonts' 
              }
          }]
      },
      {
          test: /\.css$/,
          use: [
              'style-loader',
              'css-loader',
              'sass-loader'
          ]
      },
      {
          test: /\.scss$/,
          use: [
              "style-loader", 
              "css-loader", 
              "sass-loader" 
          ]
      },
  </code></pre>
  
  <p>webpack, entry section:</p>
  
  <pre><code>entry: {
          myStyles: './stles/myStyles.js'
      },
  </code></pre>
  
  <p>myStyles.js:</p>
  
  <pre><code>import fontawesome from "@fortawesome/fontawesome-free/scss/fontawesome.scss";
  import regular from "@fortawesome/fontawesome-free/scss/regular.scss";
  import solid from "@fortawesome/fontawesome-free/scss/solid.scss";
  import brands from "@fortawesome/fontawesome-free/scss/brands.scss";
  
  fontawesome.library.add(solid, regular, brands) 
  </code></pre>
  
  <p>The last line though caused the error in Chrome:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'add' of undefined
  </code></pre>
  
  <p>I also tried to add imports into my entry scss and it worked at some point, then stopped:</p>
  
  <pre><code>$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
  @import "~@fortawesome/fontawesome-free/scss/fontawesome";
  @import "~@fortawesome/fontawesome-free/scss/regular";
  @import "~@fortawesome/fontawesome-free/scss/solid";
  @import "~@fortawesome/fontawesome-free/scss/brands";
  </code></pre>
  
  <p>So, finally in my template I have:</p>
  
  <pre><code>&lt;i class="fas fa-user-circle fa-fw"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>and what I see is only squares.</p>
  
  <p>I checked Chrome, fonts are loaded (ttf, woff, woff2).</p>
  
  <p>Please help. I already spent more than 6(!!!!) hours wasted on this problem and it's more than I spent on anything else related with webpack.</p>
  
  <p>UPD I think I figured it out. I found that my public path was wrong, I mean this part of webpack config: publicPath: '../static/fonts' - it currently points to the static/fonts folder one level up from my html. First of all, relative path is wrong per se, secondly, a relative path will not work for other folders, third, I've changed it to the relative to the root: '/static/fonts' and it worked.</p>