【问题标题】:How to install font-awesome in Visual Studio 2017 using ASP.NET Core v2如何使用 ASP.NET Core v2 在 Visual Studio 2017 中安装 font-awesome
【发布时间】:2018-09-08 04:26:46
【问题描述】:

我正在使用 ASP.NET Core v2 构建网页,并希望使用 font-awesome。

首先让我说我已经尝试了几件事。比如从 NPM 安装 Bower,从 NPM 安装 font-awesome,从 VS 中的 Bower 包安装 font-awesome,但似乎没有任何效果。

有人可以提供安装 font-awesome 的正确方法吗,(最好不要使用大量控制台命令或手动复制文件。)

这就是我的 depedencises 目前的样子

【问题讨论】:

  • 您是否尝试使用 NuGet 安装它? nuget.org/packages/FontAwesome
  • 嗯,确实将软件包安装为 Nuget,但是如何在我的网页上启用它?
  • 你应该在你的页眉<link href="../Content/font-awesome.min.css" rel="stylesheet" />引用font- awesome CSS
  • 查看我的答案以获取更多详细信息和示例
  • 在.Net core中这个文件会被添加到下面的路径C:\Users\username\.nuget\packages\fontawesome\4.7.0

标签: asp.net-mvc npm visual-studio-2017 bower font-awesome


【解决方案1】:

我建议为此使用 LibMan (Short documentation how to use it)。

我手动编写的,打赌你可以通过“添加 -> 客户端库”添加它。这是我的 libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
    "libraries": [
        {
            "library": "font-awesome@4.7.0",
            "destination": "wwwroot/lib/font-awesome",
            "files": [
                "css/font-awesome.min.css",
                "fonts/fontawesome-webfont.eot",
                "fonts/fontawesome-webfont.svg",
                "fonts/fontawesome-webfont.ttf",
                "fonts/fontawesome-webfont.woff",
                "fonts/fontawesome-webfont.woff2",
                "fonts/FontAwesome.otf"
            ]
        }
    ]
}

【讨论】:

【解决方案2】:

Bower 即将消失。 NuGet 现在专注于 .NET 包,因此获得 font-awesome 的最佳选择是通过 NPM。

1.下载NPM

确保您安装了最新的nodejs。导航到https://nodejs.org/en/ 并下载 LTS 版本。

要检查您机器上安装的node 和npm 的版本:

  1. 在 Visual Studio 中右键单击您的项目
  2. 选择“打开命令行”
  3. 选择“默认 (Cmd)”(或您要使用的任何命令提示符)
  4. 运行命令node -v 和npm -v

2。加package.json

您需要将 npm 配置文件添加到您的项目中。这个配置文件列出了你所有的包,并被 npm 用来在需要时恢复包。

添加 npm 配置文件:

  1. 在 Visual Studio 中右键单击您的项目
  2. 选择“添加”->“新项目”
  3. 选择左侧的“ASP.NET Core”,在右上角的搜索栏中搜索“npm”
  4. 点击“添加”

3。安装 font-awesome(和其他)

打开package.json 并在devDependencies 下输入"font-awesome":,它应该会自动为您提供可供选择的版本列表。选择你喜欢的版本。

通过保存这个package.json 文件,npm 会将列出的库下载到您项目下隐藏的node_modules 文件夹中。

4。将文件复制到 wwwroot

在 ASP.NET Core MVC 应用程序中,如果要使用样式和 javascript 文件等静态内容,除了需要在 Startup.cs 中启用 app.UseStaticFiles(); 外,还需要将文件复制到 wwwroot 文件夹。默认情况下,例如 node_modules 中的内容不可用于您的应用程序。

您当然可以手动将您想要的文件处理到 wwwroot 文件夹中。但是,每当有新版本出现时,您就必须替换文件。

要正确复制文件,我们需要使用 3rd 方工具!

BundlerMinifier 是一个很棒的工具,您可以使用它来捆绑您想要的文件并将它们输出到您想要的目录。它使用类似的配置文件bundleconfig.json:

但此工具不适用于.css 和.js 以外的文件类型。 font-awesome 字体文件夹的相对 URL 也存在问题,因为 font-awesome 样式使用 url();(设置 "adjustRelativePaths": false 并不总是有效)。

5。创建 Gulp 任务

为了正确将 font-awesome 文件和字体移动到 wwwroot 文件夹,我可以使用 gulp 来设置我可以在构建之前、构建之后等运行的任务:

5.1。安装gulp(和rimraf,unix命令rm -rf)

转到package.json 并在依赖项列表中键入gup 和rimraf。保存文件。

5.2。将gulpfile.js 添加到您的项目并定义任务

我基本上需要创建一个任务来将 font-awesome 移动到 wwwroot/libs 文件夹,并创建另一个任务来做相反的清理工作。我省略了与 font-awesome 无关的其他任务。

Gulp +v4.0 的 5.2.1 更新:

gulp 来自 gulp v4.0 使用 gulp.series() 组合多个任务 所以如果你使用 Gulp +v4.0 你应该更新你的代码如下:

gulp.task('default', gulp.series(
    'copy:font-awsome'
));

gulp.task('clean', gulp.series(
    'clean:font-awesome'
));

5.3 运行任务

设置gulpfile.js 后,您应该能够看到“Task Runner Explorer”中列出的任务。如果 Visual Studio 中没有该窗口,请转到“查看”->“其他窗口”。

您可以通过右键单击任何任务并点击“运行”来手动运行它。或者,您可以在构建前、构建后、清理或项目打开时自动运行它。

设置绑定后,将在gulpfile.js 中添加一个标头:

现在保存gulpfile.js 文件并构建您的项目。您的字体很棒的文件和字体应该会自动移动到 wwwroot 并准备好使用。

【讨论】:

    【解决方案3】:

    我在 Windows 10 上使用 ASP.NET Core 2.0.8,但也很难将 FA 纳入我的项目。我可以通过将它添加到依赖项下的 package.json(正如其他人提到的那样)中来将它添加到 NPM,如下所示:

        {
          "version": "1.0.0",
          "name": "asp.net",
          "private": true,
          "devDependencies": {},
          "dependencies": {
            "bootstrap": "^4.1.1",
            "font-awesome": "4.7.0",
            "jquery": "^3.3.1",
            "popper.js": "^1.14.3"
          }
        }

    不幸的是,虽然它恢复了包,但它并没有在我预期的地方部署 css 文件,因此我可以引用它们。我不相信以下是“正确”的方法(仍在学习!),但是,它对我有用。

    在解决方案资源管理器中:

    • 导航到 依赖项 > npm
    • 右键单击font-awesome > 在文件资源管理器中打开
    • 进入css文件夹
    • 复制 .css 文件
    • 返回 Visual Studio,在 Solution Explorer 中导航到 wwwroot
    • 右键单击css > 在文件资源管理器中打开
    • 粘贴到文件中

    您现在可以将它们拖到您的项目中以引用它们,然后开始使用 Font Awesome,如下所示:

    _Layout.cshtml:

    <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>@ViewData["Title"] websiteTitle</title>
        
            <environment include="Development">
                <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
                <link rel="stylesheet" href="~/css/site.css" />
                <link href="~/css/font-awesome.css" rel="stylesheet" />
            </environment>
            <environment exclude="Development">
                <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/css/bootstrap.min.css"
                    asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                    asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
                <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
            </environment>
        </head>

    希望这对像我一样路过的人有所帮助。

    【讨论】:

    • 希望我们仍然可以找到“正确”的方法来做到这一点。
    • 最简单的方法是使用 LibMan,@Aleksej Vasinov 在下面回答。它同时支持 VS2017 和 VS2019。请参阅 Microsoft 文档提供的链接。
    【解决方案4】:

    转到 package.json

    在依赖项部分添加以下标签"font-awesome": "^4.7.0"

    例如:-

      {
      "name": "imsy-app",
      "version": "0.0.0",
      "license": "MIT",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build --prod",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "^5.2.0",
        "@angular/common": "^5.2.0",
        "@angular/compiler": "^5.2.0",
        "@angular/core": "^5.2.0",
        "@angular/forms": "^5.2.0",
        "@angular/http": "^5.2.0",
        "@angular/platform-browser": "^5.2.0",
        "@angular/platform-browser-dynamic": "^5.2.0",
        "@angular/router": "^5.2.0",
        "angular2-moment": "^1.9.0",
        "core-js": "^2.4.1",
        "ng2-toasty": "^4.0.3",
        "ng5-breadcrumb": "0.0.6",
        "rxjs": "^5.5.6",
        "zone.js": "^0.8.20",
        "font-awesome": "^4.7.0"
      },
      "devDependencies": {
        "@angular/cli": "1.6.6",
        "@angular/compiler-cli": "^5.2.0",
        "@angular/language-service": "^5.2.0",
        "typescript": "~2.5.3"
      }
    }
    

    【讨论】:

      【解决方案5】:

      这适用于 .NET Core 2,在您使用 dotnet new angular 创建 SPA 项目后:

      进入项目根目录并安装包:npm install font-awesome --save。您现在应该在 package.json 依赖项中看到它。

      然后转到 webpack.config.vendor.js 并将 font awesome 添加到不可摇树模块下的数组中:

      const nonTreeShakableModules = ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'es6-promise', 'es6-shim', 'event-source-polyfill', 'font-awesome/css/ font-awesome.css', 'jquery', ];

      现在我们需要告诉 webpack 我们添加了这个新包。因此,如果您在使用 npm install --save-dev npm-install-webpack-plugin 将其安装到项目的根目录之前还没有这样做。

      最后,在项目根目录下运行这个命令:webpack --config webpack.config.vendor.js

      【讨论】:

      • 看来你是从另一篇文章中复制了这个答案,我没有使用角度
      • 是的,它适用于 mvc angular js 应用程序,但不要担心,如果您的问题无法使用上述步骤解决,您可以尝试以下软件包:Install-Package FontAwesome.MVC -Version 1.0.0。因为你只尝试过 fontawesome 包,所以试试这个 fontawesome.MVC。我希望你的问题能解决。
      【解决方案6】:

      作为Microsoft的推荐

      推荐的安装客户端依赖项的方法,例如 Bootstrap 在 ASP.NET Core 中是通过 Bower(使用 bower.json)

      打开bower.json文件并将font-awesome添加到依赖项

      {
        "name": "ASP.NET",
        "private": true,
        "dependencies": {
          "Font-Awesome": "4.3.0"
        }
      }
      

      打开bower.json 下的.bowerrc 文件,directory 属性设置为wwwroot/lib,表示 Bower 将安装包资产的位置。

      {
       "directory": "wwwroot/lib"
      }
      

      现在你可以参考下面的 font-awesome

      <link href="/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
      

      开始使用 Font Awesome 的最简单方法是使用其公共内容交付网络 (CDN) 位置添加对其的引用:

      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
      

      更多详情:
      https://docs.microsoft.com/en-us/aspnet/core/client-side/bower

      【讨论】:

        【解决方案7】:

        在 Visual Studio 中使用这种方法无需编码。 在解决方案资源管理器中选择 Web 项目,然后右键单击并选择添加,然后选择客户端库。这也会将必要的内容添加到 libman.json 文件中。

        选择 Unpkg,然后搜索:Font Awesome。 只需选择像这样的 4.7 版本(点击图片放大):

        之后,您可以在 Razor 文件中添加此示例中的图标:

          <button class="btn btn-success col-md-3 offset-3"><i class="fa-cloud-download fa"></i>&nbsp;Load data</button>
        

        请注意,我们使用“fa”,然后我们可以添加带有以“fa-”开头的 CSS 类的图标。

        简单!

        免责声明:这可能在 VS 2019 中效果最佳,而不是 VS 2017..

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2017-04-02
          • 2017-08-05
          • 2017-09-13
          • 1970-01-01
          • 1970-01-01
          • 2019-02-26
          • 2018-08-18
          • 1970-01-01
          相关资源
          最近更新 更多