Laravel Mix 에서 fontawesome 사용하기

fontawesom을 사용할 경우 주의점음 현재 css 파일이 위치하는 곳과 css 파일에서 필요한 fonts의 위치를 일치 시켜주는 것이다.
여기에서 사용할 fontawesom-free/css/all.css 를 보면 상단부가 아래와 같다.

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }

즉 현재 css 경로에서 상위폴더의 webfonts 이하의 폰트들을 참조하는 것이다.
이 경로만 주의하면 된다.

fontawesome-free Install

npm i @fortawesome/fontawesome-free

webpack.mix.js

mix.styles([
    '..........',
    'node_modules/@fortawesome/fontawesome-free/css/all.css',
], 'public/assets/app/css/app.css').version();

mix.copy([
    'node_modules/@fortawesome/fontawesome-free/webfonts/'
], 'public/assets/app/webfonts');

all.css를 public/assets/app/css/app.css 으로 합쳐 옮긴다.
app.css 상위폴더 에서 webfonts 폴더 이하로 fontawesom-free 의 웹폰트를 옮긴다.

npm run development

컴파일을 마치고 /assets/app/css/app.css 을 불러와서 사용하면 된다