Полное руководство: установка Font Awesome в Laravel 9 с помощью Vite

Font Awesome – это популярный набор инструментов для создания значков, который предоставляет широкий спектр масштабируемых векторных значков. Laravel — это мощная PHP-инфраструктура для веб-разработки, а Vite — инструмент сборки, который улучшает рабочий процесс разработки. В этой статье мы рассмотрим различные способы установки Font Awesome в Laravel 9 с помощью Vite, а также приведем примеры кода.

Метод 1: использование NPM или диспетчера пакетов Yarn

  1. Откройте терминал и перейдите в каталог проекта Laravel.

  2. Выполните следующую команду, чтобы установить Font Awesome с помощью NPM:

    npm install @fortawesome/fontawesome-free

    или с помощью Yarn:

    yarn add @fortawesome/fontawesome-free

  3. В проекте Laravel откройте файл resources/js/app.jsи импортируйте CSS-файл Font Awesome:

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

  4. Запустите сервер разработки Vite с помощью команды:

    npm run dev

    или

    yarn dev

Метод 2. Использование CDN

  1. Перейдите на сайт Font Awesome ( https://fontawesome.com/ ) и войдите в свою учетную запись (или создайте новую).

  2. После входа в систему перейдите в раздел «Наборы» и создайте новый комплект для своего проекта.

  3. Выберите параметр «Использовать в HTML» и скопируйте предоставленный тег сценария.

  4. В проекте Laravel откройте файл resources/views/layouts/app.blade.php(или любой другой файл макета, который вы используете).

  5. Вставьте тег сценария в раздел <head></head>:

    <head>
 <!-- Other head elements -->
 {!! $fontAwesomeScript !!}
</head>

  6. В проекте Laravel откройте файл resources/views/layouts/app.blade.php(или любой другой файл макета, который вы используете).

  7. Используйте значки Font Awesome в шаблонах блейдов:

    <i class="fas fa-user"></i> <!-- Example usage of Font Awesome user icon -->

Метод 3: использование Laravel-Mix

  1. Установите Font Awesome с помощью NPM или Yarn, как описано в методе 1.

  2. Откройте файл webpack.mix.jsв корневом каталоге проекта Laravel.

  3. Добавьте в файл следующий код:

    mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       require('postcss-import'),
       require('tailwindcss'),
       require('autoprefixer'),
   ])
   .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');

  4. В проекте Laravel откройте файл resources/js/app.jsи импортируйте CSS-файл Font Awesome:

    import 'webfonts/fa-solid-900.woff2';
import 'webfonts/fa-regular-400.woff2';
import 'webfonts/fa-brands-400.woff2';

  5. Запустите команду сборки Laravel Mix:

    npm run dev

    или

    yarn dev

В этой статье мы рассмотрели три различных способа установки Font Awesome в Laravel 9 с помощью Vite. В первом методе использовались менеджеры пакетов NPM или Yarn, во втором — Font Awesome CDN, а в третьем — Laravel Mix. Выберите метод, который соответствует требованиям вашего проекта, и легко интегрируйте Font Awesome во внешний интерфейс вашего приложения Laravel.

Не забудьте импортировать необходимые файлы CSS и шрифтов и выполнить соответствующие шаги сборки, чтобы гарантировать правильную работу Font Awesome в вашем проекте Laravel 9 с Vite.