Блог

Я создаю приложение Chrome, в котором используется значок значка-календарь, а также значок fa fa-шеврон-справа.

Когда я просматриваю свое приложение в браузере, значок fa fa-chevron работает, но не значок значка-календаря. В настоящее время они просто отображаются в виде белых полей.

Когда я запускаю свое приложение через расширение thing в Chrome, КАК fa, так и значок не работают.

У меня есть файл 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>
  

Приложения Chrome подпадают под действие следующей политики безопасности содержимого:

 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 не может загружать сами значки из внешнего источника.

Невозможно ослабить эту политику. В некоторых случаях вы можете обойти это, явно загрузив ресурсы и используя их в качестве blob: URL-адресов, но это действительно не будет разумно работать для FA.

Вам необходимо загрузить локальную версию FA вместо того, чтобы использовать предоставленную CDN.