4

我正在使用 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 文件找到我的字体目录/修复此错误？

4

6 回答 6

5

内部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-01T17:55:58.743 回答
3

Use Resource Handler，这是定义和访问资源的标准机制。我看到您的资源以正确的方式放置。

尝试将你的css上的路径替换为这样的东西

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

更多信息：

JSF 资源库有什么用途，应该如何使用？

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

于 2013-08-01T17:35:32.007 回答
1

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

Omnifaces UnmappedResourceHandler

这里我们完全不需要修改第三方资源。

看起来像这样： 

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

于 2016-05-04T11:01:27.377 回答
0 
@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-21T23:51:36.907 回答
0

在 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>']}
于 2016-02-12T04:15:40.790 回答
0

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

不用说，越来越多的框架与引导程序无缝协作。

于 2017-01-12T13:42:03.017 回答