在Laravel中安装和使用Font Awesome图标

在本节中，我们将使用Laravel来安装Font Awesome。我们将讨论一个简单的示例来理解在Laravel中使用Font Awesome的方法。在下面的示例中，我们将安装Font Awesome Laravel 7。

现在，让我们逐步了解使用Laravel Mix来安装Font Awesome图标的过程。Font Awesome可以通过两种方式安装在Laravel中，我们通过两个示例进行解释。在我们的第一个示例中，我们将使用npm命令和Laravel Mix。在我们的第二个示例中，我们将使用CDN JS。Font Awesome图标可以在Laravel 6、7和8等版本中轻松使用。安装图标的逐步过程如下：

示例1：使用Namp安装

首先，将安装最新版本的Laravel。执行以下命令：

composer create-project --prefer-dist laravel/laravel blog

现在我们将使用我们的Laravel应用程序并安装npm。为此，我们将使用以下命令。使用此命令，mode_module文件夹将在我们的根目录中创建，该文件夹将存储所有npm模块。

npm install

现在，我们将使用以下npm命令安装font-awesome库：

npm install font-awesome --save

成功安装这个库后，我们将使用 app.scss 文件，并在其中导入 Font Awesome CSS。我们可以使用以下命令进行导入：

@import "node_modules/font-awesome/scss/font-awesome.scss";

现在所有都已安装完毕。所以我们可以运行npm dev命令。我们将使用以下命令来运行它：

npm run dev

在以下代码中，我们在我们的blade文件中使用了我们生成的app.css文件：

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-copy"></i>
<i class="fa fa-save"></i>
<i class="fa fa-trash"></i>
<i class="fa fa-home"></i>

</body>
</html>

现在我们的应用程序已经准备好运行了，在首页上可以看到它。运行这个应用程序后，我们会得到以下的布局。

示例2：使用CDNJS安装

现在我们将通过使用cdn js文件来添加字体awesome图标。添加代码如下所示：

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
<head>
    <title> Use of font awesome </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/fontawesome.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/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-copy"></i>
<i class="fa fa-save"></i>
<i class="fa fa-trash"></i>
<i class="fa fa-home"></i>

</body>
</html>

执行上述任何例子后，我们将得到以下输出：

在Laravel中安装和使用Font Awesome图标