Glyphicons не получают отображаться правильно

Я занимаюсь разработкой приложения с JSF, primefaces и самонастройки 3.Glyphicons не получают отображаться правильно

тестовой страницы из glyphicons отлично отображается в браузере, но когда я пытаюсь использовать иконки в Сети В проекте я получаю странные символы.

Моего предположения, что файл glyphicons CSS не может найти шрифты, даже если я скопировал их также в проект, и пусть относительные тракты то же самое:

-resources 
    -css 
     -bootstrap.css 
     -bootstrap-glyphicons.css 
    -fonts 
     -glyphicons-halflings.eot 
     -glyphicons-halflings.otf 
     -glyphicons-halflings.svg 
     ...

Как я могу убедиться, что файл CSS находит мой каталог шрифтов/исправить эту ошибку?

источник

2013-08-01 xgb84j

Как выглядит ваша разметка HTML для значков? – ZimSystem

Его так же, как в примере, который вы загружаете с помощью глификонов: – xgb84j

Пробовал ли вы без 's' в конце .. ' ZimSystem

Используйте Resource Handler, который является стандартным механизмом для определения и доступа к ресурсам. Я вижу, что ваши ресурсы размещены правильно, чтобы сделать это.

Попробуйте заменить пути на вашем CSS что-то вроде этого

#{resource['fonts:glyphicons-halflings.svg']}

Дополнительная информация:

What is the JSF resource library for and how should it be used?

http://www.packtpub.com/article/jsf-images-css-and-js

источник

2013-08-01 17:35:32

Спасибо, что решил! – xgb84j

bootstrap-glyphicons.css Внутри заменить следующие строки:

src:url('../fonts/glyphiconshalflings-regular.eot')
к
#{resource['fonts:glyphiconshalflings-regular.eot]}

src:url('../fonts/glyphiconshalflings-regular.eot?#iefix')
к
#{resource['fonts:glyphiconshalflings-regular.eot?#iefix]}

src:url('../fonts/glyphiconshalflings-regular.woff')
к
#{resource['fonts:glyphiconshalflings-regular.woff]}

src:url('../fonts/glyphiconshalflings-regular.ttf')
к
#{resource['fonts:glyphiconshalflings-regular.ttf]}

src:url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular')
в
#{resource['fonts:glyphiconshalflings-regular.svg#glyphicons_halflingsregular]}

источник

2013-08-01 17:55:58 n1k1ch

@font-face{ 
    font-family:'Glyphicons Halflings'; 

src:url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.eot']}"); 

src:url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'), 

url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.woff']}") format('woff'), 

url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'), 

url("#{resource['bootstrap/fonts/glyphicons-halflings-regular.svg']}#glyphicons-halflingsregular") format('svg') 
}

источник

2014-10-21 23:51:36

esta es la respuesa correcta note que debe colocar el paquete si utiliza paquetes, y los parametros debe quedar por fuera del resurces –

Пожалуйста, используйте английский язык и почему бы вам просто не включить некоторые объяснения в свой пост, а не комментировать его? –

В HTML Страница:

<h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.eot"></h:outputStylesheet> 
    <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.svg"></h:outputStylesheet> 
    <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.ttf"></h:outputStylesheet> 
    <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.woff"></h:outputStylesheet> 
    <h:outputStylesheet library="css" name="bootstrap/fonts/glyphicons-halflings-regular.woff2"></h:outputStylesheet>

В CSS (вы можете переопределить @ шрифта лицо в другом файле .css и дону 't touch bootstrap.css):

@font-face { 
    font-family: 'Glyphicons Halflings'; 

    src: url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.eot']}"); 
    src: url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'), 
     url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.woff']}") format('woff'), 
     url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'), 
     url("#{resource['css:bootstrap/fonts/glyphicons-halflings-regular.svg']}#glyphicons_halflingsregular") format('svg'); 
}

Общее использование:

#{resource['<resource name>']}

или

#{resource['<library name>:<resource name>']}

источник

2016-02-12 04:15:40 ndaniel8a

Посмотрите здесь. Omnifaces уже решил, что для нас :)

Omnifaces UnmappedResourceHandler

Здесь нет необходимости изменять ресурсы третьих лиц на всех.

Выглядит то так:

<h:head> 
 
    <h:outputStylesheet name="glyphicons/web/html_css/css/glyphicons.css"/> 
 
</h:head>

источник

2016-05-04 11:01:27 user3328336

Для меня самое простое решение заключается в использовании bootsfaces и осуществлять, по меньшей мере, один элемент bootsfaces на странице. Тогда все ссылки на bootsfaces libs были загружены без каких-либо проблем. Поскольку у меня было слишком много проблем с макетами и javascript с первичными объектами в сочетании с бутстрапом, я заменил все элементы простых элементов на простые jsf и bootsfaces и некоторые элементы из richfaces. Несомненно, это не решение для каждой потребности, но это сэкономило мне много времени, так как у меня мало знаний в бутстрапе и не так много времени, чтобы потратить на css/js/html.

Излишне говорить, что все больше и больше фреймворков работают с бутстрапом.

источник

2017-01-12 13:42:03 glocknergrat

Glyphicons не получают отображаться правильно

ответ

Смежные вопросы