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

8594 단어 tutoriallaravelfontawesomewebdev
이 자습서에서는 font awesome에 laravel을 설치하는 방법에 대해 설명합니다. laravel에서 font awesome을 사용하는 것에 대해 질문이 있으시면 솔루션과 함께 간단한 예제를 제공하겠습니다. 폰트 어메이징 라라벨 7 설치에 대해 간단하게 설명드렸습니다. 라라벨에서 폰트 어메이징 설치를 보실 수 있습니다.

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

laravel 6, laravel 7, laravel 8 및 laravel 9 버전에서 font awesome 아이콘을 쉽게 사용할 수 있습니다. 아래에서 단계별 프로세스를 살펴보겠습니다.

예 1 - Npm을 사용하여 설치



먼저 최신 버전의 laravel이 설치됩니다. 다음 명령을 실행합니다.

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


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

#! /bin/bash
npm install


그런 다음 아래npm 명령을 사용하여 font-awesome 라이브러리를 설치해야 합니다. 다음 명령을 실행합니다.

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


성공적으로 설치한 후 app.scss 파일에 font awesome CSS를 가져와야 합니다. 따라서 다음과 같이 가져오겠습니다.


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 </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>


이 블로그를 읽어주셔서 감사합니다.
초보자를 위한 Laravel 9 CRUD 예제 튜토리얼
중앙 수직 및 수평

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage