0

Я делаю хром-приложение, которое использует иконку-календарь, а также fa fa-chevron-right.Шрифт Awesome Icons, не работающий над приложением Chrome

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

Когда я запускаю свое приложение через предмет расширения на хроме, ОБА и 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> 
+0

У вашего 'icons.css' есть' .icon-calendar'? – henry

ответ

0

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.

+0

Так что же имя файла, которое мне нужно поставить в папку? Если я не могу использовать icons.css ... –

+1

Это не имеет ничего общего с 'icons.css': почему это не работает, мы не можем догадаться, не видя файл. Я говорю о 'font-awesome.min.css'. Вам нужны папки 'css' и' fonts' из загружаемой версии FA в вашем приложении (возможно, только из них). – Xan