Как использовать Font Awesome 4.x CSS-файл с JSF? Браузер не может найти файлы шрифтов

Question

Как использовать Font Awesome 4.x CSS-файл с JSF? Браузер не может найти файлы шрифтов

Я пытаюсь интегрировать Font Awesome в JSF.

<h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" />

Но браузер не может найти файлы шрифтов. Они появляются как пустые квадраты:

введите описание изображения здесь

Я ожидал, что они будут выглядеть ниже:

введите описание изображения здесь

Как это вызвано и как я могу решить это?

13

css jsf font-awesome

Источник

user1534549 15 июл '15 в 15:36

5 ответов

Решение

Также 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">

Рекомендации:

Primefaces Font Awesome

4

Источник

user960525 01 июл '16 в 03:13

Я изменил путь в "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;

}

1

Источник

user5816074 20 янв '16 в 13:20

Я изменил путь к файлам 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/..."

0

Источник

user1534549 16 июл '15 в 11:07

Тот же ответ, что и у BalusC с некоторыми изменениями. Примечание: я интегрирую Metronic Theme.

*/@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 добавив строки в своем ответе.

0

Источник

user4255756 22 авг '16 в 20:04

Другие вопросы по тегам css jsf font-awesome

user157882 16 июл '15 в 12:31 2015-07-16 12:31 · Accepted Answer · 2015-07-16 12:31

CSS-файл Font Awesome по умолчанию ссылается на эти файлы шрифтов через относительный путь ../ как ниже:

@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
 :

И включенный класс Font 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.

Затем вам нужно действовать соответствующим образом, добавив приведенные ниже отображения пантомимы в 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" />

Смотрите также:

Как использовать Font Awesome с webjars.org с JSF