字形图标无法正确显示答案

【问题标题】：Glyphicons don't get displayed properly字形图标无法正确显示
【发布时间】：2017-01-12 22:49:22
【问题描述】：

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

【问题讨论】：

图标的 HTML 标记是什么样的？
它与您使用 glyphicons 下载的示例相同：
你试过没有's'结尾吗..<span class="glyphicon glyphicon-search"></span

标签： jsf twitter-bootstrap primefaces glyphicons

【解决方案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]}

【讨论】：

【解决方案2】：

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

尝试将你的 css 上的路径替换为类似的东西

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

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

【讨论】：

【解决方案3】：

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

Omnifaces UnmappedResourceHandler

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

看起来像这样：

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

【讨论】：

【解决方案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')
}

【讨论】：

esta es la respuesa correcta note que debe colocar el paquete si utiliza paquetes, y los parametros debe quedar por fuera del resurces
请用英文，你为什么不在你的帖子中加入一些解释而不是评论它？

【解决方案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>']}

【讨论】：

【解决方案6】：

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

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

【讨论】：