Я пытаюсь интегрировать шрифт Awesome в JSF.
<h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" />
Но браузер не может найти файлы шрифтов. Они отображаются как пустые квадраты:
Я ожидал, что они будут выглядеть ниже:
Как это вызвано и как я могу его решить?
Шрифт 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" />
Также primefaces>5.11 имеет Font Awesome из коробки
Просто добавьте этот context-param в свой web.xml:
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>true</param-value>
</context-param>
Затем вы можете применить значки Font Awesome следующим образом:
<p:submenu label="Time" icon="fa fa-clock-o">
Ссылки:
Я изменил путь файлов oet, ttf, svg, woff в файле font-awesome.min.css следующим образом:
http://localhost:8080/Students_manager/javax.faces.resource/fontawesome-webfont.svg.xhtml?ln=font-awesome/fonts&v=4.2.0#fontawesomeregular
он отлично работает для меня, но я все еще ищу другое решение, потому что у меня должен быть динамический путь, а не статический, как "http://localhost:8080/Students_manager/..."
Я изменил путь в "font-awesome.css" и отлично работал
@font-face {
font-family: 'FontAwesome';
src: url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),
url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),
url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),
url('../resources/font-awesome-4.5.0/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular')
format('svg');
font-weight: normal;
font-style: normal;
}
Тот же ответ, что и BalusC, с некоторыми изменениями. Примечание. Я интегрирую тему Metronic.
*/@font-face{font-family:'FontAwesome';
src:url("#{resource['global:plugins/font-awesome/fonts/fontawesome-webfont.eot']}&v=4.4.0");
src:url("#{resource['global:plugins/font-awesome/fonts/fontawesome-webfont.eot']}&#iefix&v=4.4.0") format('embedded-opentype'),
url("#{resource['global:plugins/font-awesome/fonts/fontawesome-webfont.woff2']}&v=4.4.0") format('woff2'),
url("#{resource['global:plugins/font-awesome/fonts/fontawesome-webfont.woff']}&v=4.4.0") format('woff'),
url("#{resource['global:plugins/font-awesome/fonts/fontawesome-webfont.ttf']}&v=4.4.0") format('truetype'),
url("#{resource['global:plugins/font-awesome/fonts/fontawesome-webfont.svg']}&v=4.4.0#fontawesomeregular") format('svg');font-weight:normal;font-style:normal}
то же самое для simple-line-icons.min.css
и, как сказал BalusC, добавьте изменение web.xml, добавив строки в свой ответ.
