laravel 10 在 vite 工作流中引入并使用 Font Awesome 6

引入 Font Awesome 组件到 Laravel 项目的 Vite 构建中涉及一些步骤。以下是一般的指南：

1. 安装 Font Awesome：

通过 npm 或 yarn 安装 Font Awesome。在项目根目录下运行：

1

npm install @fortawesome/fontawesome-free

或者使用 yarn：

1

yarn add @fortawesome/fontawesome-free

2. 引入 Font Awesome 样式：

在 Vite 项目中，你可以在入口文件（通常是 main.js 或 main.ts,laravel 默认是 app.js ）中引入 Font Awesome 样式。

1
2
3
4
5

// src/main.js or src/main.ts or resources/js/app.js

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

// 其他的入口文件内容...

这将引入 Font Awesome 的所有样式。如果你只需要使用特定图标的样式，你可以根据需要引入 solid、regular 或 brands 中的子集。

4. npm 构建

1
2
3
4

npm run dev

## laravel sail 环境需要添加 sail 前缀
sail npm run dev

3. 开始使用

然后你就可以使用 Font Awesome 图标了。