如何安装字体真棒使用ASP.NET睿2版的Visual Studio 2017年

问题描述 投票：2回答：6

我使用ASP.NET开发的核心V2一个网页，想用的字体，真棒。

首先我要说，我已经试过几件事情。像NPM从VS鲍尔包，但没有安装鲍尔，从NPM安装字体真棒，安装字体真棒似乎工作。

有人可以提供安装字体真棒，正确的方法（首选，而无需使用大量的控制台命令或文件的手动复制的。）

这是我目前depedencises看起来像

enter image description here

enter image description here

enter image description here enter image description here

asp.net-mvc npm visual-studio-2017 bower font-awesome
6个回答
4
投票

我使用ASP.NET核心2.0.8，在Windows 10，只是挣扎在我的项目获得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
  • 用鼠标右键单击字体真棒>在文件浏览器打开
  • 进去css文件夹
  • 复制.css文件
  • 早在Visual Studio中，在解决方案资源管理器，浏览到wwwroot文件
  • 右键点击CSS>打开的文件浏览器
  • 粘贴文件

您现在可以将这些到您的项目，使对它们的引用，并开始使用字体真棒，就像这样：

_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>

希望这是一些帮助的人停止了，好像我是。

4
投票

我会建议使用利布曼这个（Short documentation how to use it）。

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

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
    "libraries": [
        {
            "library": "[email protected]",
            "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"
            ]
        }
    ]
}
1
投票

qazxsw POI是要离开。 qazxsw现在POI专注于.NET的软件包，你最好的赌注获得Bower是通过NuGet。

1.Download NPM

请确保你已经安装了最新font-awesome。导航到NPM并下载LTS版本。

要检查nodejs的版本以及https://nodejs.org/en/您的计算机上安装：

  1. 右键点击您的项目在Visual Studio
  2. 选择“打开命令行”
  3. 选择“默认（CMD）”（或任何命令提示符下要使用）
  4. 运行命令node和npm

node -v

2.添加npm -v

你需要有故宫配置文件到您的项目。这个配置文件列出了所有你的包，并使用NPM时，它需要恢复的包。

要添加NPM配置文件：

  1. 右键点击您的项目在Visual Studio
  2. 选择“添加” - >“新建项目”
  3. 在左侧选择“ASP.NET核心”搜索“故宫”时，搜索栏右上方
  4. 点击“添加”

enter image description here

3.安装字体真棒（及其他）

打开package.json下enter image description here，只需键入package.json，它会自动给你提供的版本你可以选择列表。挑选你喜欢的版本。

通过保存这个文件devDependencies的"font-awesome":会下载你的项目下列入隐藏package.json文件夹中的库。

npm

4.将文件复制到wwwroot文件

在ASP.NET MVC的核心应用程序，如果你想使用静态内容类似的风格和JavaScript文件，你身边需要启用node_modules在enter image description here，你还需要将文件复制到wwwroot文件夹。默认情况下，内容，例如，在app.UseStaticFiles();不维修您的应用程序。

你当然也可以手动你想要的文件处理到wwwroot文件夹。但你将不得不更换每当有新版本出来的文件。

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

Startup.cs是一个伟大的工具，你可以使用你想要的文件，并将其输出捆绑到你想要的目录。它使用一个名为node_modules类似的配置文件：

BundlerMinifier

但是这个工具并不比bundleconfig.json和enter image description here其他类型的文件很好地工作。也有相对URL的字体真棒字体文件夹中的一个问题，因为字体真棒样式使用.css（设置.js并不总是奏效）。

5.创建咕嘟咕嘟任务

要正确地移动字体真棒文件和字体到wwwroot文件夹，我可以用url();设置任务，我可以构建之后构建之前运行，等：

5.1. Install "adjustRelativePaths": false (and gulp, the unix command gulp)

转到rimraf和依赖关系列表中键入rm -rf和package.json。保存文件。

gup

5.2. Add rimraf to your project and define tasks

基本上，我需要创建移动字体真棒到wwwroot文件/ libs文件夹，并创建另一个任务做反向的清理任务。我省略不相关的字体真棒其他任务。

enter image description here

5.3 Run tasks

当你已经设置了gulpfile.js，你应该能够看到“任务运行资源管理器”中列出的任务。如果你没有在Visual Studio中的窗口，进入“查看” - >“其他窗口”。

enter image description here

您可以手动运行通过右键任何任务单击它，然后点击“运行”。或者，你可以把它构建之前时自动运行，后建设，清洁或项目开放。

您设置绑定后，头会被添加到gulpfile.js：

enter image description here

现在保存gulpfile.js文件并生成项目。您的字体真棒文件和字体应自动移动到wwwroot文件，并准备使用。

enter image description here

0
投票

这是.NET的Core 2，创建使用SPA项目的dotnet新的角度后：

转到项目的根目录，安装软件包：NPM安装字体真棒--save。您现在应该看到它的package.json依赖性。

之后去webpack.config.vendor.js并添加字体真棒下非树的可震动模块的排列：

常量nonTreeShakableModules = [ '引导'， '引导/ DIST / CSS / bootstrap.css'， 'ES6-承诺'， 'ES6-垫片'， '事件 - 源填充工具'，“字体真棒/ CSS /字体真棒的CSS， '的jquery'，];

现在，我们需要告诉我们添加了这个新包的WebPack。所以，如果你还没有这样做之前，在项目的根与故宫安装此安装--save-dev的NPM-安装-的WebPack的插件。

最后，在项目的根目录运行以下命令：--config的WebPack webpack.config.vendor.js

0
投票

作为从gulpfile.js推荐

安装客户端侧的依赖关系等自举在ASP.NET核心的推荐的方法是通过鲍尔（使用enter image description here）

打开Microsoft文件，并添加bower.json的依赖

bower.json

下font-awesome打开{ "name": "ASP.NET", "private": true, "dependencies": { "Font-Awesome": "4.3.0" } } 文件，该.bowerrc属性设置为bower.json这表明鲍尔将安装包资产的位置。

directory

现在，你可以参考字体真棒如下

wwwroot/lib

开始使用字体真棒是一个引用到它，使用它的公共内容分发网络（CDN）的位置最简单的方法：

{
 "directory": "wwwroot/lib"
}

更多细节： <link href="/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />

0
投票

去的package.json

在依赖节“^ 4.7.0”：添加下面的标签“字体真棒”

例如： - 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.