Larabel Mix에 Font Awesome을 설치하는 방법

Larabel Mix에 Font Awesome을 설치하는 방법

Laravel Mix를 할 때 Font Awesome을 설치하려고 .run npm dev하다

1 와 함께 할 수 .
실패 ^ 후 //module_module/module_module/module/module/module1/wwww/scbar)에이 합니다.cvar content "var content = requi"는 "var content = requi"입니다(1, )

파일에 있는 코멘트를 삭제하고 글꼴 경로를 변경하려고 했지만 문제가 해결되지 않았습니다.

webpack.webpack.webpack.m

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .copy('node_modules/font-awesome/fonts/', 'public/fonts')
   .sass('node_modules/font-awesome/scss/font-awesome.scss', 'public/css')
   .version();

폰토썸.scss

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";

_parames.scss

// Variables
// --------------------------

$fa-font-path:        "../fonts" !default;
$fa-font-size-base:   14px !default;
$fa-line-height-base: 1 !default;
// $fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix:       fa !default;
$fa-version:          "4.7.0" !default;
$fa-border-color:     #eee !default;
$fa-inverse:          #fff !default;
$fa-li-width:         (30em / 14) !default;
// Continue...

글꼴을 설치하려면 먼저 npm과 함께 설치해야 합니다.따라서 프로젝트 루트 디렉토리에 다음과 같이 입력합니다.

npm install font-awesome --save

(node.npm). 지금까지 해오셨고요.npm install★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」

이 을 편집하고resources/assets/sass/app.scss다음 행의 맨 위에 파일을 저장하고 추가합니다.

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

다음은 예를 들어 보겠습니다.

npm run dev

그러면 올바른 폴더에 리소스 미정 버전이 구축됩니다.최소화할 경우 다음 작업을 수행합니다.

npm run production

그리고 글꼴을 사용할 수 있습니다.

Font Awesome 5 ( webfont with css )및 Larabel mixin add package for font awesome 5

npm i --save @fortawesome/fontawesome-free

또한 app.scss 또는 커스텀 sss 파일에 글꼴을 Import합니다.

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

자산을 컴파일하거나 컴파일한 css를 레이아웃에 포함합니다.

Larabel 5.3~5.6에 Font Awesome 5를 설치하는 방법 (올바른 방법)

webpack.mix.js 설정을 빌드합니다.

mix.setPublicPath('public');
mix.setResourceRoot('../');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

npm과 같은 패키지 매니저를 통해 최신 버전의 Font Awesome을 설치합니다.

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

이 의존관계 엔트리가 package.json에 포함되어 있을 것입니다.

// Font Awesome
"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",

메인 SCSS 파일 /resources/ass/app.scs에서 하나 이상의 스타일을 Import합니다.

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

자산을 컴파일하여 실전 가동 가능한 미니 빌드를 생성할 수 있습니다.

npm run production

마지막으로 블레이드 템플릿/레이아웃에서 생성된 CSS 파일을 참조합니다.

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

Laravel 8에 Laravel Mix 6 탑재 Font Awesome 5 설치 방법 (더 라이트 웨이)

https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621

Larabel 5.7(이상) 및 Fontawesome 5.3을 사용하는 신규 사용자용입니다.

npm install @fortawesome/fontawesome-free --save

및 app.scss에 있습니다.

@import '~@fortawesome/fontawesome-free/css/all.min.css';

달려.

npm run watch

레이아웃에서 사용

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Laravel > = 5.5의 경우

• 실행합니다.npm install font-awesome --save
• @import "~font-awesome/scss/font-awesome.scss";resources/assets/saas/app.scss
• 실행합니다.npm run dev (오류)npm run watch또는 심지어npm run production)

저는 Larabel 5.5.14를 사용하고 있는데, 위의 어느 것도 제 기능을 하지 않습니다.이게 제가 이걸 작동시키기 위해 했던 단계입니다.

1. npm을 사용하여 글꼴을 설치합니다.

   npm install font-awesome --save

하려면 2. 폰트를 퍼블릭디렉토리에 이 합니다.webpack.mixin.js

mix.copyDirectory('node_modules/font-awesome/fonts', 'public/fonts/font-awesome');

3. app.scss를 열고 node_modules 글꼴 경로와 컴파일에 사용할 상대 경로를 지정합니다.

$fa-font-path: "../fonts/font-awesome" !default;
@import "~font-awesome/scss/font-awesome.scss";

npm을 사용하여 폰토썸을 처음 설치하다

npm install --save @fortawesome/fontawesome-free

resources\sass\app.scss

// Fonts
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

resources\js\app.js

require('@fortawesome/fontawesome-free/js/all.js');

그 후 실행

npm run dev

또는

npm run production

Larabel 7용 솔루션

1. 멋진 폰트 라이브러리를 설치합니다.

npm install font-awesome --save

2. 라이브러리 설치 후.다음 파일을 열고 지정된 코드를 붙여넣습니다.

<you_project_location>/module/module/app.scss

@import "~font-awesome/scss/font-awesome";

3. 다음 파일을 열고 지정된 코드를 붙여넣습니다.

<you_project_location>/webpack.location.webpack.dl

mix.setResourceRoot("../");

4. 사용 환경에 따라 명령을 실행합니다.

npm run dev

또는

npm의 실가동

글꼴 폴더를 공용 폴더에 복사하여 붙여넣을 필요가 없습니다. 모두 자동으로 처리됩니다.

Larabel 9 및 폰타이즈 6.1

composer create-project laravel/laravel:^9 laravel-9

cd laravel-9

npm i --save-dev @fortawesome/fontawesome-free@^6.1.0

파일 " " "resources/sass/app.scss

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

webpack.mix.js에 의해

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

// set path to laravel public directory
//mix.setPublicPath('public');

// path to laravel public directory from public/css/app.css
mix.setResourceRoot("../");

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

뷰에 추가

<script src="{{ mix('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />

됩니다: 바 : 바바 、 올 note 、 are are are are are are are are are are 。public디렉토리로 이동합니다.많은 답변에서 볼 수 있듯이 수동으로 복사할 필요가 없습니다.

에 있는 는, 「larabel」(http://domain/site/)을 추가합니다.mix_url로로 합니다.config/app.php

    // laravel mix assets url
    'mix_url' => env('APP_URL', null),

사용하고 있는 패스가 올바르지 않습니다.node_module을 열고 글꼴 표시 경로를 찾을 수 있습니다.js 또는 svg 글꼴을 사용할 수 있지만 css 스타일을 선호합니다.

에 이 font-free를 설치합니다.npm install --save-dev @fortawesome/fontawesome-free

그 후에 당신은 이것을 할 수 있다.

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

그리고 다음과 같은 글꼴 경로를 복사합니다. 이것은 옵션입니다.

.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/fonts');

으로 해 주세요.npm run dev ★★★★★★★★★★★★★★★★★」npm run watch

나는 최근에 Laravel 5.6에 관한 블로그를 썼다.블로그 링크는 https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574 입니다.

순서는 위의 설명과 유사합니다.다만, 제 경우는, 「public」디렉토리의 font-awesome 에의 webfonts 패스를 설정하는 등, 추가의 순서를 실행할 필요가 있었습니다.Larabel 혼합으로 리소스 루트 설정 등자세한 내용은 블로그에서 확인할 수 있습니다.

여기에 링크를 남겨두면 언급한 솔루션이 효과가 없는 사람들을 도울 수 있습니다.

npm install font-awesome --save

경로 앞에 ~/ 추가

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

위의 답변은 모두 미완성이라는 것을 알게 되었습니다.다음은 그것을 실행하기 위한 정확한 순서입니다.

1. 패키지 설치에는 npm을 사용합니다.이를 위해 콘솔을 열고 Laravel 응용 프로그램 디렉토리로 이동합니다.다음과 같이 입력합니다.

   npm install font-awesome --save-dev

2. 이제 필요한 파일을 public/css 및 public/fonts 디렉토리에 복사해야 합니다.이를 위해 webpack.mix.js 파일을 열고 다음을 추가합니다.

   mix.copy('node_modules/font-awesome/css/font-awesome.min.css', 'public/css'); mix.copy('node_modules/font-awesome/fonts/*', 'public/fonts');

3. 다음 명령을 실행하여 Larabel Mix를 실행합니다.

   npm run dev

4. 응용 프로그램 레이아웃 파일(Resources/views/layouts/app.blade)에 Font Awesome 스타일시트를 추가합니다.phpapp.blade.blade) :

   <link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />

5. 다음과 같은 템플릿에 멋진 글꼴 아이콘을 사용합니다.

   <i class="fa fa-address-book" aria-hidden="true"></i>

도움이 됐으면 좋겠네요!

webpack.mix.js에서 '*'를 추가해 보십시오.

.copy('node_modules/font-awesome/fonts/*', 'public/fonts')

언급URL : https://stackoverflow.com/questions/43451509/how-to-install-font-awesome-in-laravel-mix