JSF bootstrap Glyphicons 不显示答案

【问题标题】：JSF bootstrap Glyphicons does not showJSF bootstrap Glyphicons 不显示
【发布时间】：2014-12-16 18:07:13
【问题描述】：

在我的网络应用程序中，我使用引导程序。
Glyphicons 工作得很好，他们没有任何理由停止了。现在没有图标，只有空方块。
我检查了字体文件 - 它们完好无损，只是为了确保我用 3.2 版中的新字体替换了它们 - 来自完整版而不是定制器。
我检查了 css 选项 - 一切看起来都很好：

src: url(#{resource['fonts:glyphicons-halflings-regular.eot']}) format('embedded-opentype');
src: url(#{resource['fonts:glyphicons-halflings-regular.woff']}) format('woff');
src: url(#{resource['fonts:glyphicons-halflings-regular.ttf']}) format('truetype');
src: url(#{resource['fonts:glyphicons-halflings-regular.svg']}) format('svg');

我检查了 bootstrap.css 文件是否已加载 - 是的。
现在我被困住了：

chrome 或 firefox 控制台中没有错误

字体在正确的位置，在 css 文件中正确配置

这是最新版本的字体
我迷路了——有人知道接下来要检查什么吗？

编辑
我的配置是 Wildfly 8.1 final，加上 JSF 2.2，bootstrap 3.0 就是这样。

编辑 2
正如我的同事刚刚告诉我的，这个问题是在将我们的应用从 Jboss 7.2 迁移到 Wildfly 8.0 后首先注意到的，所以这可能是原因。

【问题讨论】：

标签： html css twitter-bootstrap jsf

【解决方案1】：

将字体添加到 /webapp/resources/fonts，然后编辑您正在使用的 LESS 或 CSS，更改 @font-face 块以匹配以下内容：

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url("#{resource['fonts/glyphicons-halflings-regular.eot']}");
    src: url("#{resource['fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'),
            url("#{resource['fonts/glyphicons-halflings-regular.woff']}") format('woff'),
            url("#{resource['fonts/glyphicons-halflings-regular.ttf']}") format('truetype'),
            url("#{resource['fonts/glyphicons-halflings-regular.svg']}#glyphicons-halflingsregular") format('svg');
}

在这里查看我的帖子：http://www.samael.me.uk/2014/02/how-to-use-bootstrap-3-in-your-java-web.html

编辑：我建议在编译后的 CSS 上使用 LESS，它更容易使用，您可以通过调整变量文件或放入主题轻松更改整个外观。你也可以看看使用http://www.webjars.org/

编辑2：可能是 wildfly 不知道如何提供字体。我不熟悉wildfly（通常使用Tomcat），但看着related issue elsewhere，您可能需要：

<mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>ttf</extension>
    <mime-type>application/font-sfnt</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff</extension>
    <mime-type>application/font-woff</mime-type>
</mime-mapping>

【讨论】：

查看我的编辑2，看到您的第二次编辑，我认为这可能是原因。
谢谢。您在第二次编辑中的建议不是问题。在 stackoverflow 上发布任何内容之前，我将 mime-mapping 添加到 wildfly 配置。

【解决方案2】：

嗯 - 这个问题没有解决 - 我决定我不想在这个废话上浪费时间，并切换到 font-awesome。它就像魅力一样。
谢谢你的时间

【讨论】：

【解决方案3】：

我按照这篇文章中的说明解决了这个问题：http://www.solewing.org/blog/2014/02/bootstrap-glyphicons-and-javaserver-faces-2-x/

该解决方案与 samael 的解决方案相同，但语法略有不同。更改 bootstrap.css 或 bootstrap.min.css。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("#{resource['fonts:glyphicons-halflings-regular.eot']}");
  src: url("#{resource['fonts:glyphicons-halflings-regular.eot?#iefix']}") 
           format('embedded-opentype'), 
       url("#{resource['fonts:glyphicons-halflings-regular.woff']}") 
           format('woff'), 
       url("#{resource['fonts:glyphicons-halflings-regular.ttf']}")
           format('truetype'), 
       url("#{resource['fonts:glyphicons-halflings-regular.svg#glyphicons_halflingsregular']}") 
           format('svg');
}

【讨论】：