Material Design Icon - md-icon标签在Mozilla Firefox上不起作用



我遵循材质设计图标中的Self Hosting步骤当使用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

其他细节:我的<<p> strong> 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"]);

---------------------------------- 编辑 ----------------------------------

相同的错误没有显示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

您可以查看此答案以了解您的问题的更多细节。你的问题可以通过托管你的angular应用来解决。我建议使用Grunt和手表。它很容易设置和开始,也给你实时加载。你可以在这里阅读更多内容:Grunt Watch

托管应用程序也是一个很好的实践,因为它使它在行为上更接近实际应用程序。

最新更新