Morioh
Login
Duck Hwan

Duck Hwan

10 months ago

Laravel Mix로 Font Awesome을 설치하는 방법

이 튜토리얼에서는 laravel mix에 멋진 글꼴 아이콘을 설치하는 방법을 보여 드리겠습니다. laravel에서 멋진 글꼴을 설치하는 두 가지 예를 보여드리겠습니다. 하나는 laravel mix를 사용하여 npm 명령을 사용하고 다른 샘플은 CDN js를 사용합니다 .

laravel 6, laravel 7, laravel 8 및 laravel 9 버전에서 글꼴 멋진 아이콘을 쉽게 사용할 수 있습니다. 그럼 아래에서 단계별 과정을 살펴보겠습니다.

예 1: Npm을 사용하여 설치

먼저 최신 버전의 라라벨이 설치됩니다. 다음 명령을 실행하십시오.

#! /bin/bash
composer create-project --prefer-dist laravel/laravel font-awesome

이제 새로운 laravel 애플리케이션에 npm을 설치해야 합니다. 그럼 아래 명령어를 실행해 볼까요? 이 명령은 루트 디렉터리에 " mode_modules " 폴더를 만들고 모든 npm 모듈을 저장합니다.

#! /bin/bash
npm install

그런 다음 아래 npm 명령을 사용하여 멋진 글꼴 라이브러리를 설치해야 합니다 . 다음 명령을 실행하십시오.

#! /bin/bash
npm install font-awesome --save

성공적으로 설치한 후 파일 에 멋진 글꼴 CSS를 가져와야 합니다 app.scss. 그럼 아래와 같이 import 해보겠습니다.

resources/sass/app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

//Font Awesome

@import "node_modules/font-awesome/scss/font-awesome.scss";

이제 webpack.mix.js a 아래와 같이 파일을 업데이트하십시오.

mix.ts("resources/js/app.tsx", "public/js/app.js")
   .sass('resources/sass/app.scss', 'public/css/app.css', {
      sassOptions: {
        quietDeps: true,
      },
   }
);

이제 모든 것이 설치되었습니다. 따라서 npm dev 명령을 실행할 수 있습니다. 다음 명령을 실행하십시오.

#! /bin/bash
npm run dev

다음 코드에서는 app.css블레이드 파일에 생성된 파일을 사용하고 있습니다.

resources/views/welcome.blade.php

<!DOCTYPE html>  
<html>  
<head>  
    <title> Use of font awesome (TechvBlogs)</title>  
    <link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">  
    <style type="text/css">  
        i{  
            font-size: 50px !important;  
            padding: 10px;  
        }  
    </style>  
</head>  
<body>  
    
<h1> Use of font awesome </h1>  
    
<i class="fa fa-home"></i>  
<i class="fa fa-lock"></i>  
<i class="fa fa-users"></i>  
<i class="fa fa-cogs"></i>  
    
</body>  
</html>

이제 애플리케이션을 실행하고 홈 페이지에서 볼 수 있습니다. 아래 레이아웃이 표시됩니다.

예 2: CDNJS를 사용하여 설치

여기서는 글꼴 멋진 아이콘을 추가하기 위해 CDN js 파일을 사용할 것이므로 다음 파일 코드를 살펴보겠습니다.

resources/views/welcome.blade.php

<!DOCTYPE html>  
<html>  
<head>  
    <title> Use of font awesome (TechvBlogs) </title>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
    <style type="text/css">  
        i{  
            font-size: 50px !important;  
            padding: 10px;  
        }  
    </style>  
</head>  
<body>  
    
<h1> Use of font awesome </h1>  
    
<i class="fa fa-home"></i>  
<i class="fa fa-lock"></i>  
<i class="fa fa-users"></i>  
<i class="fa fa-cogs"></i>  
    
</body>  
</html>

읽어 주셔서 감사합니다!!!

1.10 GEEK