title: How can I make fontawesome work in a Vue project in production builds?
body: <p>I am building a small project with Vue, typescript, vuetify and icons from fontawesome5. But I am coming across a weird challenge that I cant overcome. In dev mode, all the icons are showing fine from font awesome, but when I build for production, the icons show as square boxes. So far, all my components, custom vuetify theme, backend api, everything works as expected in my build, but not the icons. I also noticed that during prod builds, the fontawesome fonts are not are being included which explains the problem. I did try setting a direct link to fontawesome cdn in index.html but that does work either.</p>
  <p>My setup is simple. Project intialized with</p>
  <ul>
  <li><code>vue create .</code></li>
  <li><code>vue add vuetify</code></li>
  </ul>
  <p>So far, this is what I have tried/made sure of are:</p>
  <pre><code>import '@fortawesome/fontawesome-free/css/all.css';
  import vuetify from './plugins/vuetify';
  </code></pre>
  <p>So css is being imported. I have tried moving around this imoort statement, but that doesnt solve it.</p>
  <p>Vuetify init</p>
  <pre><code>import Vue from 'vue';
  import Vuetify from 'vuetify/lib';
  
  Vue.use(Vuetify);
  
  export default new Vuetify({
    theme: {
      themes: {
        light: {
          primary: '#3577F6',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#5543BD',
          success: '#00695c',
          warning: '#F6BC41'
        },
        dark: {
          primary: '#3577F6',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#5543BD',
          success: '#00695c',
          warning: '#F6BC41'
        }
      },
    },
    icons: {
      iconfont: 'fa',
    },
  });
  </code></pre>
  <p>I tried moving the css import here, but thats a no go.</p>
  <p>My package.json is</p>
  <pre><code>{
    &quot;name&quot;: &quot;client&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build &amp;&amp; npm run docs&quot;,
      &quot;dev&quot;: &quot;vue-cli-service serve&quot;,
      &quot;docs&quot;: &quot;./node_modules/.bin/redoc-cli bundle ./docs/swagger.yml --output ./dist/docs.html --options.hideDownloadButton&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@fortawesome/fontawesome-free&quot;: &quot;^5.13.1&quot;,
      &quot;axios&quot;: &quot;^0.19.2&quot;,
      &quot;lodash&quot;: &quot;^4.17.15&quot;,
      &quot;roboto-fontface&quot;: &quot;*&quot;,
      &quot;store2&quot;: &quot;^2.11.2&quot;,
      &quot;typeface-open-sans&quot;: &quot;0.0.75&quot;,
      &quot;vue&quot;: &quot;^2.6.11&quot;,
      &quot;vue-class-component&quot;: &quot;^7.2.3&quot;,
      &quot;vue-clipboard2&quot;: &quot;^0.3.1&quot;,
      &quot;vue-matomo&quot;: &quot;^3.13.5-0&quot;,
      &quot;vue-notification&quot;: &quot;^1.3.20&quot;,
      &quot;vue-router&quot;: &quot;^3.3.4&quot;,
      &quot;vuetify&quot;: &quot;^2.3.1&quot;,
      &quot;vuex&quot;: &quot;^3.1.3&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@types/lodash&quot;: &quot;^4.14.155&quot;,
      &quot;@vue/cli-plugin-router&quot;: &quot;^4.4.4&quot;,
      &quot;@vue/cli-plugin-typescript&quot;: &quot;^4.4.4&quot;,
      &quot;@vue/cli-plugin-vuex&quot;: &quot;^4.4.4&quot;,
      &quot;@vue/cli-service&quot;: &quot;^4.4.4&quot;,
      &quot;redoc-cli&quot;: &quot;^0.9.8&quot;,
      &quot;sass&quot;: &quot;^1.26.8&quot;,
      &quot;sass-loader&quot;: &quot;^8.0.0&quot;,
      &quot;typescript&quot;: &quot;^3.9.5&quot;,
      &quot;vue-cli-plugin-vuetify&quot;: &quot;~2.0.6&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.11&quot;,
      &quot;vuetify-loader&quot;: &quot;^1.5.0&quot;
    }
  }
  </code></pre>
  <p>Some mention that css-loader is required along with webpack, so I did install css loader but that didnt solve it.</p>
  <p>Because I am using the standard vue cli (version @vue/cli 4.4.1), i didnt see a webpack config file.</p>
  <p>Dev mode:
  <a href="https://i.stack.imgur.com/ib6Ck.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ib6Ck.png" alt="enter image description here" /></a></p>
  <p>Prod serving built files:
  <a href="https://i.stack.imgur.com/fNboF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fNboF.png" alt="enter image description here" /></a></p>
  <p>How can i fix this?</p>