Laravel 7 supports FontAwesome with SVG & Customize your icons

2 min readJul 22, 2020

It’s just steps of note will not explain more. If you want to integrate FontAwesome in a modern way. It's for you.

Install packages

$ npm i @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

Configuration

Open resources/js/bootstrap.js and add code below into try...catch... block

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');require('bootstrap');    // Font Awesome
    window.fontawesome = require('@fortawesome/fontawesome-svg-core');
    window.fontawesome.library.add(
        require('@fortawesome/free-solid-svg-icons').fas,
        require('@fortawesome/free-regular-svg-icons').far,
        require('@fortawesome/free-brands-svg-icons').fab,
        // require('./fonts/customize-svg-icons').fac,
    );
    $(function() {
        fontawesome.dom.watch();
    });
} catch (e) {}

(Optional) Customize SVG Icon

If you need to add custom SVG icons by yourself:

Create folder resources/js/fonts/customize-svg-icons
Create a [ICON_NAME].js and index.js

index.js

// index.js
import example from './example';const fac = {
  example,
};export {
  fac,
};

example.js

The main concept is copy the path of svg to last argument of icon array. As well as change 𗫩 Unicode.

export default {
  prefix: 'fac',
  iconName: 'example',
  icon: [
    512,
    512,
    [],
    '&#97001;',
    'M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm90.2-146.2C315.8 352.6 282.9 368 248 368s-67.8-15.4-90.2-42.2c-5.7-6.8-15.8-7.7-22.5-2-6.8 5.7-7.7 15.7-2 22.5C161.7 380.4 203.6 400 248 400s86.3-19.6 114.8-53.8c5.7-6.8 4.8-16.9-2-22.5-6.8-5.6-16.9-4.7-22.6 2.1zM168 240c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z',
  ],
};

Remove comment for require('./fonts/customize-svg-icons').fac, in bootstrap.js .

And here we go, you can use <i> in your views.

<i class="fac fa-example"></i>
<i class="fas fa-camera"></i>