我遵循材质设计图标中的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
托管应用程序也是一个很好的实践,因为它使它在行为上更接近实际应用程序。