如何使用 ASP.NET Core v2 在 Visual Studio 2017 中安装 font-awesome

Question

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

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

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

这就是我的 depedencises 目前的样子

Answer 1

我建议为此使用 LibMan（如何使用它的简短文档）。

我手动写的，打赌你可以通过“添加 - >客户端库”添加它。这是我的 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"
            ]
        }
    ]
}

Answer 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 MVC的核心应用程序，如果你想使用静态内容类似的风格和JavaScript文件，你身边需要启用app.UseStaticFiles();的Startup.cs，你还需要将文件复制到wwwroot文件夹。默认情况下，例如 in 的内容node_modules对您的应用程序无效。

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

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

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

但是此工具不适用于.css和以外的文件类型.js。还有一个相对 url 到 font-awesome fonts 文件夹的问题，因为 font-awesome 样式使用url();（设置"adjustRelativePaths": false并不总是有效）。

5. 创建 Gulp 任务

为了正确地将字体很棒的文件和字体移动到 wwwroot 文件夹，我可以gulp用来设置我可以在构建之前、构建之后等运行的任务：

5.1. 安装gulp（以及rimraf，unix 命令rm -rf）

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

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

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

5.2.1 Gulp +v4.0 更新：

来自 gulp v4.0 的 gulpgulp.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 并准备好使用。

Answer 3

作为微软的推荐

在 ASP.NET Core 中安装 Bootstrap 等客户端依赖项的推荐方法是通过 Bower （使用bower.json）

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

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

打开.bowerrc下的文件bower.json，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 ://learn.microsoft.com/en-us/aspnet/core/client-side/bower