Ответ 1
Шрифт Awesome CSS файл по умолчанию ссылается на эти файлы шрифтов через относительный путь ../, как показано ниже:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Это не удастся, если сам файл CSS запрашивается по другому пути. JSF <h:outputStylesheet> сделает это, если вы укажете атрибут library. Более того, JSF будет использовать специальный шаблон префикса /javax.faces.resource/* для этих ресурсов, чтобы специально активировать обработчик ресурсов JSF, который позволяет свободу настройки. Подробную информацию можно найти в Что такое библиотека ресурсов JSF и как ее использовать?
При наличии структуры папок, как показано ниже,
WebContent
|-- resources
| `-- font-awesome
| |-- css
| | |-- font-awesome.css
| | `-- font-awesome.min.css
| `-- fonts
| |-- fontawesome-webfont.eot
| |-- fontawesome-webfont.svg
| |-- fontawesome-webfont.ttf
| |-- fontawesome-webfont.woff
| `-- fontawesome-webfont.woff2
:
И шрифт Awesome CSS включен как ниже:
<h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" />
Затем вам нужно отредактировать CSS файл, как показано ниже, чтобы использовать отображение #{resource} в EL для ссылки на файлы шрифтов в папке /resources с соответствующей библиотекой и именем ресурса (а так как имя библиотеки заканчивается как параметр строки запроса уже вам нужно заменить ? на &, это не обязательно, если вы не используете имя библиотеки).
@font-face {
font-family: 'FontAwesome';
src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&v=4.3.0");
src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&#iefix&v=4.3.0") format('embedded-opentype'),
url("#{resource['font-awesome:fonts/fontawesome-webfont.woff2']}&v=4.3.0") format('woff2'),
url("#{resource['font-awesome:fonts/fontawesome-webfont.woff']}&v=4.3.0") format('woff'),
url("#{resource['font-awesome:fonts/fontawesome-webfont.ttf']}&v=4.3.0") format('truetype'),
url("#{resource['font-awesome:fonts/fontawesome-webfont.svg']}&v=4.3.0#fontawesomeregular") format('svg');
font-weight: normal;
font-style: normal;
}
Убедитесь, что вы перезагрузили сервер после редактирования файла CSS. Наличие EL-выражений в определенном файле CSS обнаруживается только один раз, когда обработчик ресурсов JSF считывает файл CSS и затем запоминает всю информацию.
Если вы видите предупреждения JSF1091 в журналах сервера для этих файлов шрифтов, как показано ниже:
ПРЕДУПРЕЖДЕНИЕ: JSF1091: для файла [тип файла шрифта] не найден тип mime. Чтобы решить эту проблему, добавьте сопоставление типа mime в приложения web.xml.
Затем вам нужно действовать соответственно, добавив ниже mime-сопоставления к web.xml:
<mime-mapping>
<extension>eot</extension>
<mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>
<extension>otf</extension>
<mime-type>font/opentype</mime-type>
</mime-mapping>
<mime-mapping>
<extension>svg</extension>
<mime-type>image/svg+xml</mime-type>
</mime-mapping>
<mime-mapping>
<extension>ttf</extension>
<mime-type>application/x-font-ttf</mime-type>
</mime-mapping>
<mime-mapping>
<extension>woff</extension>
<mime-type>application/x-font-woff</mime-type>
</mime-mapping>
<mime-mapping>
<extension>woff2</extension>
<mime-type>application/x-font-woff2</mime-type>
</mime-mapping>
Если вы используете библиотеку служебных программ JSF OmniFaces, альтернативой редактированию файла CSS с отображением #{resource} является установите OmniFaces UnmappedResourceHandler и перенастройте отображение FacesServlet в соответствии с его документацией. Вам нужно только убедиться, что вы больше не ссылаетесь на файл CSS шрифта через library:
<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />
