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

【问题标题】：How do I also include the Bootstrap fonts directory in my ASP app?如何在我的 ASP 应用程序中也包含 Bootstrap 字体目录？
【发布时间】：2016-03-31 20:00:17
【问题描述】：

我正在运行 ASP5/MVC6。

我通过凉亭包括 Bootstrap，像这样：

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

运行我的应用时，使用 glyphicons 字体的代码 sn-ps 不起作用，例如：

<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');
}

我的目录结构与此相符：

【问题讨论】：

标签： css asp.net asp.net-mvc twitter-bootstrap fonts

【解决方案1】：

更改您的 bootstrap.css，并确保 fontface src 指向正确的目录：

@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');
}

【讨论】：

请查看我的最新编辑。正如我的图片所示，所有默认设置都应该是正确的。
注意，即使我指向 Bootstrap 的 cdn，字体仍然没有随之而来......所以我不知道从这里做什么。仍在研究中。

【解决方案2】：

只需确保将 font 文件夹直接放在项目根目录下，而不是嵌套在 bootstrap => dist 文件夹中。

您的 CSS 中的这部分 '../fonts/glyphicons-halflings-regular.eot') 正在尝试从根目录读取字体，但您在根目录中没有字体。如上所述移动文件夹应该可以解决问题。

【讨论】：

这不是真的。 ASP5 将保留每个包的相关目录结构，并在引用它们时引入所需的资产。无论如何，如果我指向 Bootstrap 的 CDN，字体仍然没有出现 - 所以这里可能还有其他事情发生？
你试过我的建议了吗？？
您的建议不正确。 ../fonts/ 不指向应用程序的根目录，而是指向 css 文件的相对目录。
我遇到过这样的问题，我已经用这种方式解决了。如果您不介意，请尝试一下。只需在解决方案资源管理器中拖出文件夹即可。
@mariocatch 你的控制台有什么错误吗？您一定会收到 500 错误.. 只需检查

【解决方案3】：

我找到了答案。我网站的 CSS 文件中应用了这个：

h1, h2, h3, h4, h5, h6, p, div, span, li, a { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; }

这覆盖了 span 元素的字体系列，这是字形图标使用的。

【讨论】：