Question

我正在使用jsf，primefaces和bootstrap 3开发一个应用程序。

来自glyphicons的测试页面完美地显示在我的浏览器中，但是当我尝试使用web项目中的图标时，我只会得到奇怪的符号。

我最好的猜测是，glyphicons css文件无法找到字体，即使我将它们也复制到项目中并让相关部分相同：

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

如何确保css文件找到我的字体目录/修复此错误？

Answer 1

在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]}

Answer 2

使用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

Answer 3

看看这里。 Omnifaces已经为我们解决了这个问题：）

Omnifaces UnmappedResourceHandler

这里我们根本不需要修改第三方资源。

看起来像这样：

＆＃13;

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

＆＃13;

Answer 4

@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')
}

Answer 5

在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文件中覆盖@ font-face而不要触摸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>']}

Answer 6

对我来说，最简单的解决方案是使用 bootsfaces 并在页面中实现至少一个bootsface元素。然后加载了对bootsfaces库的所有引用都没有任何问题。由于我有过多的布局和javascript问题与primests结合bootstrap，我用普通的jsf和bootsfaces以及richfaces的一些元素替换了所有的primefaces元素。当然这不是满足所有需求的解决方案，但它节省了我很多时间，因为我在bootstrap上没有太多的知识，也没有多少时间花在css / js / html上。

毋庸置疑，越来越多的框架可以与bootstrap无缝协作。

Glyphicons无法正确显示

6 个答案: