라라벨/laravel-movies

2. Fontatwesome 설치하기

땀모 2020. 4. 5. 17:35

1. 폰트어썸 설치

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


2. resources/sass/app.scss

$fa-font-path :"../webfonts";
 
//fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';


3. 웹팩에 추가

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

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.postCss('resources/css/main.css', 'public/css', [
require('tailwindcss'),
])


4. 빌드하기

npm run dev

public/css/app.css 에 빌드된다.


5. main.blade.php 파일에 등록

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Movie App</title>

<!-- Tailwind Css Style -->
<link rel="stylesheet" href="/css/main.css">

<!-- Fomtatwesome -->
<link rel="stylesheet" href="/css/app.css">
</head>


사용방법

https://fontawesome.com/