Question

我正在使用Metro UI CSS，但图标显示为控制字符。我已将charset = utf-8“添加到head部分，并将addDefaultCharset utf-8添加到httpd.conf。仍然存在问题。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

请帮忙。提前谢谢。

Answer 1

我有同样的问题。原来我忘了将字体文件复制到fonts目录。 metro-bootstrap.css引用字体：

@font-face {
  font-family: 'iconFont';
  src: url('../fonts/iconFont.eot');
  src: url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconFont.woff') format('woff'), url('../fonts/iconFont.ttf') format('truetype'), url('../fonts/iconFont.svg#iconFont') format('svg');
  font-weight: normal;
  font-style: normal;
}

因此需要将它们放在相对于metro-bootstrap.css的相应目录中。如果您下载Metro-UI-CSS-master.zip，则可以在fonts目录中找到这些字体。

Answer 2

解决方案：

找到您的Font目录并允许其权限。（* .eot; * .woff; * .ttf; * .svg）。并注意位置。
编辑你的metro-icons.css，并输入字体目录的正确路径。（我使用浏览器检查来检查我的路径是否正确）
刷新浏览器。

Answer 3

如果您使用<!DOCTYPE html>作为您的doctype，我建议您尝试一下。

<meta charset="utf-8">

而不是

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

我希望这能解决你的问题。

Answer 4

你需要外部的css（metro-bootstrap.css）以及class =“metro”...... 这是一份工作副本： http://jsfiddle.net/67T6c/

<link href="css/metro-bootstrap.css" rel="stylesheet">

<div class="metro">
<i class="icon-home"></i>
</div>

另请注意，这适用于Chrome。但是，在IE中，您可能受到精彩的跨源Web字体块的限制。有关详细信息，请参阅此处：IE9 blocks download of cross-origin web font

Answer 5

您还必须确保您的网络服务器不会阻止文件下载并使用该字体所需的扩展名。这些是： eot; TTF; WOFF; SVG

我遇到了同样的问题，我无法以任何方式解决图标问题。我后来发现问题是由于用于开发的Web服务器， Delphi DataSnap独立模式，因为过滤了这些扩展所以这些文件没有返回到浏览器。

对于Delphi DataSnap，解决方案是：

转到WebModuleUnit

选择WebFileDispatcher1

点击WebFileExtensions属性，然后添加所需的文件扩展名。

metroUI css显示图标作为控制字符

5 个答案: