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 7. 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 6, laravel 7, laravel 8 and laravel 9 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 </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 class="fa fa-home"></i>
<i class="fa fa-lock"></i>
<i class="fa fa-users"></i>
<i class="fa fa-cogs"></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 (TechvBlogs) </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 class="fa fa-home"></i>
<i class="fa fa-lock"></i>
<i class="fa fa-users"></i>
<i class="fa fa-cogs"></i>
</body>
</html>
Thank you for reading this blog.
Top comments (0)