60호. 라라벨에서 Font Awesome 5 사용하기 free

2019-09-25

예전에 아이콘이 필요하면 Font Awesome(이하 폰트어썸)을 자주 사용했습니다. 프론트엔드쪽 작업을 안한지 오래되어서 요즘도 많이 쓰이는지는 잘 모르겠네요. 오랜만에 라라벨 프로젝트에 폰트어썸을 사용하려다 삽질을 좀 했습니다. laravel font awesome으로 검색해서 나오는 글을 따라하면 제대로 안되더라고요 ㅠ 그래서 정리해봤습니다.


npm으로 설치


라라벨은 npm을 쓰죠. 폰트어썸을 설치하는 방법은 여러가지가 있지만 npm으로 설치해서 사용하겠습니다.


npm install --save-dev @fortawesome/fontawesome-free

패키지명 맨 앞은 fontawesome이 아니라 fortawesome인것에 주의하세요.


폰트어썸 CSS 임포트


app.scss 파일에 다음의 구문을 추가해서 폰트어썸의 CSS를 임포트 합니다.


@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

웹폰트 파일 복사


구글 검색에서 나온 대부분의 문서가 앞의 단계까지만 안내하고 컴파일을 하라고 합니다. 하지만 이렇게 하면 아이콘이 제대로 표시되지 않더군요.



웹브라우저 개발자도구로 살펴보면 http://127.0.0.1:8000/webfonts/fa-regular-400.woff2 파일을 못찾는게 원인임을 알 수 있습니다. 따라서 아래와 같이 webpack.mix.js에 웹폰트 파일을 복사하는 구문을 추가해주면 됩니다.


mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')

이제 에셋을 컴파일을 해주면 폰트어썸을 사용할 수 있습니다.


npm run dev

One more thing..


위의 방식으로 해결했다고 생각했는데, laravel-mix 깃헙 이슈에는 이게 잘못된 방식이라는 지적이 있습니다.


mix.copy() 대신 mix.setPublicPath()mix.setResourceRoot()를 사용해야 한다고 하는데요, 저는 mix.setPublicPath()mix.setResourceRoot()로는 웹폰트 파일이 퍼블릭 디렉토리로 복사가 안되더라고요. 결국 포기하고 mix.copy()로 직접 복사하는 방법으로 돌아왔습니다 ㅠ 그래도 공식 저장소 이슈에서 더 정석적인 방법이라고 언급되었으니 mix.setPublicPath()mix.setResourceRoot()를 우선 시도해보세요. 안되시면 mix.copy()로 하시면 됩니다 ㅎㅎ mix.setPublicPath()mix.setResourceRoot()로 하는 방법은 앞서 언급한 이슈에 있는 댓글을 참고하시면 됩니다.


1일 1식 라라벨 60호

2019년 9월 25일

유료 구독자 전용 레터입니다.

한 달 1만원으로 매일 라라벨 관련 메일 받아보시고 과거 메일도 열람하세요. 일반 구독으로 공개글만 받아보실 수도 있습니다.

구독하기 버튼을 눌러주시면 구독과 동시에 xly에도 가입됩니다.

이현석

바쁜 팀장님 대신 알려주는 신입 PHP 개발자 안내서를 쓰고, 클린 아키텍처 인 PHP를 번역했습니다. 2020년에 출간될 Laravel Up & Running 2nd Edition을 번역하고 있습니다.