Jigsaw / Mix / Fontawesome

Fonts and webpack is a pain, but for SEO almost a must.

package.json

Install fortawesome, webfontloader and vue-fontawesome (Vue fontawesome component)

    {
      // <omitted for brevity sake>

      "devDependencies": {
       // <removed for brevity sake>

        "@fortawesome/fontawesome-free": "^5.8.1",
        "@fortawesome/fontawesome-svg-core": "^1.2.17",
        "@fortawesome/vue-fontawesome": "^0.1.6",
        "@fortawesome/free-brands-svg-icons": "^5.8.1",
        "@fortawesome/free-solid-svg-icons": "^5.8.1",
        "webfontloader": "^1.6.28"
      },
      "dependencies": {
      // <omitted for brevity sake>
      }
    }

wepack.mix.js

Install web font loader and require it in webpack.mix.js. I use google fonts example, but you can use any font. That said, I have not tested fontawesome.

    const mix = require('laravel-mix');
    const path = require('path');

    require('laravel-mix-tailwind');
    require('laravel-mix-purgecss');

    if (typeof window !== 'undefined') {
        var WebFont = require('webfontloader');

        WebFont.load({
            google: {
                families: [
                    'Lato:300,500',
                    'Roboto:300,500',
                    'Open+Sans:300,400,600,700',
                    'Montserrat:300,400,500'
                ],
            },
        });
    }


    mix.webpackConfig({
        module: {
            rules: [{
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                },
                exclude: /node_modules/,
            }],
        },
        entry: {
            vendor: [
                "webfontloader"
            ]
        },
        resolve: {
            extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
            alias: {
                styles: path.resolve(__dirname, 'resources/assets/sass'),
                '@': path.resolve(__dirname, 'resources/assets/js'),
                webfontloader: path.resolve(__dirname, "./node_modules/webfontloader/webfontloader.js")
            },
        },
    })

app.js

I have been verbose to help illustrate the different loads from the multiple font-awesome packs, but you can load all and I believe use wildcards. Frankly, Im not a fan of the fontwesome approach and it is a pain in blade.

      … <removed for brevity sake>


    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
    import { library } from '@fortawesome/fontawesome-svg-core'
    import { faCoffee,faSearch,faMinus,faTimes,faEllipsisV,faPhone,faEnvelope,faMapMarker,faEye,
        faFont,faAddressBook,faAddressCard,faHeart,faFilter,faWindowClose,faCheck,faChevronDown, faChevronRight,faChevronLeft,faTh,faList,faArrowAltCircleRight} from '@fortawesome/free-solid-svg-icons'
    import { faFacebook,faLinkedin,faInstagram,faTwitter,faYoutube,faGithub,faPinterest,faGoogle,faGooglePlus} from '@fortawesome/free-brands-svg-icons'
    library.add(faCoffee,faSearch,faMinus,faTimes,faEllipsisV,faPhone,faEnvelope,faMapMarker,faEye,faFont, faTh,faList,faAddressBook,
        faAddressCard,faHeart,faFilter,faWindowClose,faCheck,faChevronDown,faChevronRight,faChevronLeft,faArrowAltCircleRight);
    library.add(faFacebook,faLinkedin,faInstagram,faTwitter,faYoutube,faGithub,faPinterest,faGoogle,faGooglePlus);
    Vue.component('font-awesome-icon', FontAwesomeIcon);


      … <removed for brevity sake>

example.blade.php

an example element. I ran into problems where I had to be explicit and load the attribute as an array.

    <a itemprop="sameAs"
       title="CMO Solution Twitter"
       target="_blank"
       rel="nofollow"
       href="https://twitter.com/cmo_digital"
       class="linkable">
        <font-awesome-icon class="fab" :icon="['fab', 'twitter']"></font-awesome-icon>
    </a>

Hope that helps. It is a pain. Let me know if you have questions.