无法在 mvc 网络上加载引导 glyphicon 字体答案

【问题标题】：Can't load bootstrap glyphicon fonts on mvc net无法在 mvc 网络上加载引导 glyphicon 字体
【发布时间】：2017-04-09 05:49:15
【问题描述】：

当我在虚拟路径下发布网站时，我遇到了 glyphicons-font 的问题。我得到了所有引导程序字体的 404 响应代码。正在此文件夹下查看字体：

/bower_components/bootstrap/dist/fonts/

但是当站点部署时它们实际上在这个文件夹下：

XXX/bower_components/bootstrap/dist/fonts/

我正在像这样注册我的 BundleConfig.cs：

bundles.Add(new StyleBundle("~/bundles/bowercss")
    // bower:css
    .Include("~/bower_components/bootstrap/dist/css/bootstrap.min.css", new CssRewriteUrlTransform())
    .Include("~/bower_components/angular-ui-select/dist/select.min.css", new CssRewriteUrlTransform())
    .Include("~/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css", new CssRewriteUrlTransform())
    .Include("~/bower_components/angular-ui-switch/angular-ui-switch.min.css", new CssRewriteUrlTransform())
    .Include("~/bower_components/angular-xeditable/dist/css/xeditable.min.css", new CssRewriteUrlTransform())
    // endbower
);

在我的 Web.config 上，我添加了对字体的支持：

<staticContent>
          <!-- Add support to .woof2 files -->
          <remove fileExtension=".eot" />
          <remove fileExtension=".ttf" />
          <remove fileExtension=".svg" />
          <remove fileExtension=".woff" />
          <remove fileExtension=".woff2" />
          <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
          <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
          <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
          <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
          <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>

2016 年 12 月 12 日更新：

我已经尝试了 Aravind 提出的所有解决方案，但没有任何运气。我什至将所有字体复制到根文件夹并覆盖自定义 css 中的字体系列以指向新文件，但它也不起作用：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

当站点部署在虚拟路径下时，如何正确下载字体？

【问题讨论】：

标签： c# asp.net-mvc gruntjs glyphicons

【解决方案1】：

将其包含在您的 _Layout 文件中

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

或者

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

更新 1：

使用这些可以下载文件并添加到您的文件夹中。

您也可以使用 nuget 包

转到包管理器控制台并使用此命令

Install-Package glyphicon

您甚至可以通过右键单击解决方案搜索 nuget 包并单击安装将其添加到您的项目中。

【讨论】：

您好，谢谢，但我想包含我文件夹中的字体，而不是 cdn 中的字体。
下载并将其添加到您的文件夹，方法是全选并将其粘贴到 css 文件中并以这种方式命名。
我无法安装我们使用 bower 安装前端依赖项的那个包。
因为 nuget 包管理器没有我们需要的所有依赖项。

【解决方案2】：

在“_Layout.cshtml”文件中，bundles 文件夹应该有这样的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>

    @Styles.Render("~/bundles/master/css"); 
</head>
<body>
    @Scripts.Render("~/bundles/master/js");
    @RenderBody() 
</body>
</html>

然后您应该在项目的根目录中有一个名为“bundles”的文件夹。如果您没有，请创建它。
然后复制包含 glyphicons 文件的字体文件夹。澄清见This image
现在，在元素的类中添加字体名称，如下代码：

<button type="button" class="btn btn-success btn-lg ">
<span class="glyphicon glyphicon-search"></span>search 
</button>

【讨论】：