Question

我按照Material Design Icon中的自托管步骤进行操作使用Angular Material的md-icon而不是 i 标记。

虽然代码在Google Chrome和Internet Explorer 9上运行顺利，但我在使用Mozilla Firefox 48.0.1上的代码时遇到问题。

使用Firefox时，控制台日志会在下面显示以下消息至少3次：

downloadable font: download failed (font-family: "Material Icons" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: file:///D:/Atom%20Projects/kenobi/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2

其他细节：

我的 HTML ：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../node_modules/angular-material/angular-material.min.css">
    <link rel="stylesheet" href="../node_modules/material-design-icons/iconfont/material-icons.css">
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="../node_modules/angular-material/angular-material.min.js"></script>
    <script src="../node_modules/angular-aria/angular-aria.min.js"></script>
    <script src="../node_modules/angular-animate/angular-animate.js"></script>
    <script src="../app/test-package/test.js"></script>
  </head>

  <body ng-app="TestModule">
    <md-icon class="material-icon" style="color: #000000;">face</md-icon>
    <md-radio-button
  </body>

</html>

我的 Javascript ：

var app = angular.module("TestModule", ["ngMaterial"]);

---------------------------------- EDIT ------------ ----------------------

相同的错误未显示3次，但显示如下：

downloadable font: download failed (font-family: "Material Icons" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: file:///D:/Atom%20Projects/kenobi/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2

downloadable font: download failed (font-family: "Material Icons" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: file:///D:/Atom%20Projects/kenobi/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff

downloadable font: download failed (font-family: "Material Icons" style:normal weight:normal stretch:normal src index:4): bad URI or cross-site access not allowed source: file:///D:/Atom%20Projects/kenobi/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf

Answer 1

有关问题的详细信息，请参阅this answer。托管角度应用程序可以解决您的问题。我会建议使用Grunt和手表。它易于设置和启动，并为您提供实时重新加载。您可以在此处详细了解：Grunt Watch

托管您的应用程序也是一个很好的做法，它使行为更接近实际应用程序。

Material Design Icon - md-icon标签不适用于Mozilla Firefox

1 个答案: