Morioh
Login
米 萱萱

米 萱萱

6 months ago

在 Angular 17 中安装 Font Awesome 图标

Font Awesome 图标是为 Angular 17 应用添加一些风格的好方法。本指南将向您展示如何通过几个简单的步骤在您的项目中安装和使用它们。

Angular 17 中的 Google 地图步骤

  • 第 1 步： 创建 Angular 17 项目
  • 第 2 步：安装 font-awesome
  • 第 3 步：导入 CSS
  • 第 4 步：使用 Font Awesome 图标
  • 运行角度应用程序

让我们按照以下步骤操作：

第 1 步：创建 Angular 17 项目

您可以使用以下命令轻松创建角度应用程序：

ng new my-new-app

第 2 步：安装 font-awesome

在此步骤中，您只需在 Angular 17 上安装 font-awesome 并将 css 文件导入 style.css 文件。这仅适用于 css 导入。所以你可以运行以下命令：

npm install font-awesome --save

第 3 步：导入 CSS

成功安装 font-awesome 后，我们需要在 angular.json 文件中导入 css 文件。所以让我们在上面添加以下几行。

角度.json

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "appFont": {
      ....
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/font-awesome/css/font-awesome.css",
              "src/styles.css"
            ],
      ......

或者，如果上面不起作用，您也可以像这样给出路径：

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",

  "version": 1,

  "newProjectRoot": "projects",

  "projects": {

    "appFont": {

      ....

            "assets": [

              "src/favicon.ico",

              "src/assets"

            ],

            "styles": [

              "../node_modules/font-awesome/css/font-awesome.css",

              "src/styles.css"

            ],

      ......

第 4 步：使用 Font Awesome 图标

现在我们准备在 html 文件中使用 font Awesome 类。因此，让我们在 app.component.html 文件中添加以下代码。

src/app/app.component.html

<h1>Angular 17 Install Font Awesome Icons Example - ItSolutionStuff.com</h1>
   
<i class="fa fa-user fa-5x"></i>
<i class="fa fa-dashboard fa-5x"></i>
<i class="fa fa-money fa-5x"></i>
<i class="fa fa-home fa-5x"></i>
<i class="fa fa-th fa-5x"></i>

您可以运行该应用程序。

#angular #angular17 

在 Angular 17 中安装 Font Awesome 图标
1.50 GEEK