Làm cách nào để cài đặt Font Awesome 5 trong laravel 8?

Trong hướng dẫn này, chúng ta sẽ thảo luận về việc cài đặt font awesome trong laravel. Nếu bạn có thắc mắc về cách sử dụng font awesome trong laravel, tôi sẽ đưa ra một ví dụ đơn giản kèm theo giải pháp. Mình giải thích đơn giản về cài đặt font awesome laravel 7. bạn có thể thấy cách cài đặt phông chữ tuyệt vời trong laravel

Trong ví dụ này, tôi sẽ chỉ cho bạn cách cài đặt các biểu tượng phông chữ tuyệt vời trong laravel mix. Mình sẽ cho bạn 2 ví dụ cài đặt font awesome trong laravel. một mẫu sẽ sử dụng lệnh npm bằng cách sử dụng hỗn hợp laravel và một mẫu khác sẽ sử dụng CDN js

Bạn có thể dễ dàng sử dụng font awesome icon trong các phiên bản laravel 6, laravel 7, laravel 8 và laravel 9. Vì vậy, hãy xem quy trình từng bước bên dưới

Ví dụ 1 - Cài đặt bằng Npm

Đầu tiên, phiên bản mới nhất của laravel sẽ được cài đặt. Chạy lệnh sau

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

Bây giờ, chúng ta cần cài đặt npm trong ứng dụng laravel mới của chúng ta. Vì vậy, hãy chạy lệnh dưới đây. Lệnh này sẽ tạo thư mục "mode_modules" trong thư mục gốc của bạn và lưu trữ tất cả các mô-đun npm

#! /bin/bash
npm install

Sau đó, chúng ta cần cài đặt thư viện font-awesome bằng lệnh npm bên dưới. Chạy lệnh sau

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

Sau khi cài đặt thành công chúng ta cần import font awesome CSS vào file

// Fonts
@import url['//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";

1. Vì vậy, hãy nhập như dưới đây

// Fonts
@import url['//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";

2

// Fonts
@import url['//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";

Bây giờ hãy cập nhật tệp

#! /bin/bash
npm install

0 của bạn như bên dưới

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

Bây giờ mọi thứ đã được cài đặt. Vì vậy, chúng ta có thể chạy lệnh npm dev. Chạy lệnh sau

#! /bin/bash
npm run dev

Trong đoạn mã sau, chúng tôi đang sử dụng tệp

#! /bin/bash
npm install

1 được tạo trong tệp phiến của chúng tôi

#! /bin/bash
npm install

2

  
  
  
     Use of font awesome [TechvBlogs]  
      
      
  
  
    
 Use of font awesome   
    
  
  
  
  
    
  

Bây giờ bạn có thể chạy ứng dụng của mình và xem nó trên trang chủ. Bạn sẽ nhận được bố cục dưới đây

Ví dụ 2 - Cài đặt bằng CDNJS

Ở đây, chúng tôi sẽ sử dụng tệp js CDN để thêm các biểu tượng phông chữ tuyệt vời, vì vậy hãy xem mã tệp dưới đây

#! /bin/bash
npm install

2

#! /bin/bash
npm install

1

Cảm ơn bạn đã đọc blog này

đọc thêm. Laravel 9 Nhập Xuất Ví dụ Tệp Excel & CSV

Nếu bạn muốn quản lý Máy chủ VPS / VM của mình mà không cần chạm vào dòng lệnh, hãy xem liên kết này. ServerAvatar cho phép bạn thiết lập nhanh các trang web WordPress hoặc PHP tùy chỉnh trên VPS / VM chỉ trong vài phút. Bạn có thể lưu trữ nhiều trang web trên một VPS / VM, định cấu hình chứng chỉ SSL và theo dõi tình trạng của máy chủ mà không cần chạm vào giao diện dòng lệnh

Nếu bạn có bất kỳ thắc mắc hoặc nghi ngờ nào về chủ đề này, vui lòng liên hệ với chúng tôi. Chúng tôi sẽ cố gắng liên lạc với bạn

Sử dụng Font-Awesome vẫn là một cách phổ biến để thêm biểu tượng trên web của bạn vì nó cung cấp gói miễn phí với nhiều biểu tượng đáp ứng hầu hết các nhu cầu của bạn

Tôi tin rằng nhiều người vẫn sử dụng phông chữ tuyệt vời qua CDN để bắt đầu nhanh chóng. Nhưng việc sử dụng phiên bản CDN của bất kỳ thư viện nào không thể định cấu hình được và không phải là cách hiện đại so với sự phát triển ngày nay. Nhà phát triển hiện đại có xu hướng sử dụng

// Fonts
@import url['//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";

3 hoặc bất kỳ trình tạo nội dung nào để thống nhất tài nguyên thành một tệp css duy nhất và giảm thiểu mọi thứ càng nhỏ càng tốt cho hiệu suất web

Ở Laravel, chúng tôi có

#! /bin/bash
npm install

20 sử dụng

// Fonts
@import url['//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";

3 để xây dựng nội dung. Hãy thử thêm font-awesome vào bản dựng

Điều kiện tiên quyết để viết mã

Chuẩn bị ứng dụng laravel hiện có hoặc mới sẵn sàng để phát triển của riêng bạn và đảm bảo đã cài đặt

#! /bin/bash
npm install

22 &

#! /bin/bash
npm install

23 trên máy của bạn. Và bạn phải biết cách sử dụng SASS/SCSS trong laravel để áp dụng các kiểu và phông chữ

Cài đặt Font-Awesome [Phiên bản miễn phí]

Chúng tôi sử dụng NPM để cài đặt gói font-awesome-free

#! /bin/bash
npm install

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhập nội dung phông chữ tuyệt vời

Trong tệp

#! /bin/bash
npm install

24, hãy nhập các kiểu phông chữ tuyệt vời

#! /bin/bash
npm install

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trong đoạn mã trên, tôi đã nhập các kiểu

#! /bin/bash
npm install

25,

#! /bin/bash
npm install

26 và

#! /bin/bash
npm install

27. Nếu bạn chỉ cần một kiểu nhất định, vui lòng xóa các kiểu còn lại

Xuất tệp phông chữ

Trong tệp

#! /bin/bash
npm install

28, tìm cấu hình kết hợp như bên dưới

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

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và thêm bản sao xây dựng cho phông chữ tuyệt vời như thế này để xuất tệp phông chữ khi bạn đang xây dựng nội dung

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

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xây dựng

Bạn có thể xây dựng nội dung bằng cách sử dụng

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

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

hoặc

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

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Khi bạn xây dựng xong, các tệp phông chữ sẽ được xuất sang thư mục

#! /bin/bash
npm install

29

Thêm biểu tượng

Trước khi chúng tôi thử lớp font-awesome, hãy đảm bảo rằng bạn đang sử dụng cách sử dụng CSS bên ngoài mặc định của laravel trong bố cục của mình như thế này

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

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

hoặc các phông chữ sẽ không hiển thị

nên sử dụng

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

20 thay vì

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

21 để kích hoạt tính năng chặn truy xuất bộ đệm khi triển khai cho sản xuất. Nhưng cũng kích hoạt phiên bản trong tệp

#! /bin/bash
npm install

28

Làm cách nào để cài đặt Phông chữ tuyệt vời trong laravel?

Cài đặt và sử dụng các biểu tượng Font Awesome trong Laravel .

ví dụ 1. Cài đặt bằng Nmap

tài nguyên/sass/ứng dụng. scss

tài nguyên/lượt xem/chào mừng. lưỡi. php

ví dụ 2. Cài đặt bằng CDNJS

tài nguyên/lượt xem/chào mừng. lưỡi. php

Làm cách nào để thêm phông chữ tùy chỉnh trong Laravel 8?

Làm cách nào để nhập phông chữ vào laravel? . js // thư mục tài nguyên/nội dung/phông chữ chứa tệp phông chữ của chúng tôi // copyDirectory giúp sao chép tất cả các tệp có cấu trúc thư mục // sau đó chúng tôi có thể nhập phông chữ tùy chỉnh của mình như trong phương pháp đã đề cập ở trên trong hỗn hợp tệp blade hoặc css

Làm cách nào để cài đặt Font Awesome 6 trong laravel?

Hãy kiểm tra bằng cách chạy các lệnh sau. Cài đặt các phụ thuộc Node cho Laravel Mix, Autoprefixer và PostCSS. Cài đặt phiên bản Font Awesome miễn phí mới nhất thông qua trình quản lý gói npm . Tiếp theo, xây dựng webpack Laravel Mix của bạn.

Làm cách nào để sử dụng các biểu tượng Bootstrap trong Laravel 8?

Cài đặt Bootstrap trong Nút của bạn. ứng dụng hỗ trợ js với gói npm. npm install bootstrap require['bootstrap'] sẽ tải tất cả các plugin jQuery của Bootstrap lên đối tượng jQuery. Sau đó sử dụng npm install bootstrap-icons để cài đặt các biểu tượng bootstrap vào dự án của bạn và đưa nó vào ứng dụng của bạn .