How to Install Font Awesome with Laravel Mix
In this post we will give you information about How to Install Font Awesome with Laravel Mix. Hear we will give you detail about How to Install Font Awesome with Laravel Mix And how to use it also give you demo for it if it is necessary.
In this tutorial, we will discuss installing font awesome in laravel. If you have a question about using font awesome in laravel, I will give a simple example with a solution. I explained simply about installing font awesome laravel 10. you can see installing font awesome in laravel.
In this example, I will show you how to install awesome font icons in laravel mix. I will give you two examples of installing font awesome in laravel. one will be using the npm command using laravel mix, and another sample will use CDN js.
You can easily use font awesome icon in laravel 10, laravel 10, laravel 10 and laravel 10 versions. So let’s see below step by step process.
Example 1 – Install Using Npm
Firstly, the latest version of laravel will be installed. Run the following command:
#! /bin/bash
composer create-project --prefer-dist laravel/laravel font-awesome
Now, we need to install npm in our new laravel application. So let’s run the below command. This command will create a “mode_modules” folder in your root directory and store all npm modules.
#! /bin/bash
npm install
After that, we need to install the font-awesome library using the below npm command. Run the following command:
#! /bin/bash
npm install font-awesome --save
After installing successfully, we need to import font awesome CSS on the app.scss
file. So let’s import as bellow:
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";
Now update your webpack.mix.js a
file like below:
mix.ts("resources/js/app.tsx", "public/js/app.js")
.sass('resources/sass/app.scss', 'public/css/app.css', {
sassOptions: {
quietDeps: true,
},
}
);
Now everything is installed. So we can run the npm dev command. Run the following command:
#! /bin/bash
npm run dev
In the following code, we are using our generated app.css
file in our blade file:
resources/views/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<title> Use of font awesome (onlinecode)</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 ></i>
<i ></i>
<i ></i>
<i ></i>
</body>
</html>
Now you can run your application and see it on the home page. You will get the layout below.
Example 2 – Install Using CDNJS
Here, we will use CDN js file for adding font awesome icons, so let’s see bellow file code:
resources/views/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<title> Use of font awesome (onlinecode) </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 ></i>
<i ></i>
<i ></i>
<i ></i>
</body>
</html>
Thank you for reading this blog.
Also see: Laravel 10 Import Export Excel & CSV File Example
. .
If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.
Hope this code and post will helped you for implement How to Install Font Awesome with Laravel Mix. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs