字体真棒图标在 Chrome 应用程序上不起作用

Question

我正在制作一个使用 icon icon-calendar 和 fa fa-chevron-right 的 chrome 应用程序。

当我在浏览器中实时预览我的应用程序时，fa fa-chevron 图标有效，但图标图标日历无效。目前它们只是显示为白框。

当我通过 chrome 上的扩展程序启动我的应用程序时，fa 和 icon 都不起作用。

我的文件夹中有 icons.css 文件，标题中也有这些：

<link rel="stylesheet" href="icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

我是否需要在清单文件或类似文件中授予 FontAwesome 权限？

HTML：

<a>
<span class="icon icon-calendar"></span>
<span class="title">Book A Table</span>
</a>
<li>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</li>

Answer 1

Chrome 应用受以下Content Security Policy 约束：

default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' data: chrome-extension-resource: 'unsafe-inline';
img-src 'self' data: chrome-extension-resource:;
frame-src 'self' data: chrome-extension-resource:;
font-src 'self' data: chrome-extension-resource:;
media-src * data: blob: filesystem:;

这意味着您无法从外部源加载 CSS 文件，并且该 CSS 文件无法从外部源加载图标本身。

没有办法放松这个政策。在某些情况下，您可以通过explicitly downloading resources 解决它并将它们作为blob: URL 提供，但这对于FA 来说确实不合理。

你需要download a local version of FA而不是使用CDN提供的。