css - 如何在我的 ASP 应用程序中也包含 Bootstrap 字体目录？

Question

我正在运行 ASP5/MVC6。

我通过 bower 包含 Bootstrap，如下所示:

<link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css" />

运行我的应用程序时，使用字形字体的代码片段不起作用，例如:

<span class="glyphicon glyphicon-calendar"></span>

它只是显示一个空的矩形。

如果我使用 Chrome 来调试我的应用程序，我可以看到调试器的“源代码”选项卡中没有包含这些字体...那么我如何才能在我的网站中包含这些字体呢？

编辑:

我的 bootstrap.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');
}

我的目录结构是这样的:

Answer 1

更改您的 bootstrap.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');
}