Bootstrap 的字形不会显示在 <h:outputStylesheet> 中，但会显示在 <link ...> 中

Question

我想你们很多人都知道 twitter-bootstrap 这使得设计 "pretty" 网站变得如此容易。我最近在 Netbeans 中开发了一个 JSF Web 应用程序。除了字形图标之外的所有内容。

在您网站的 header 部分，您将通过

包含 bootstrap

<h:outputStylesheet library="css" name="bootstrap.min.css"></h:outputStylesheet>

如果你使用 jsf 或者

<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css"/>

如果不使用 jsf。

奇怪的是，象形文字是这个问题中的空方块： Glyphicons rendering as empty box

我已经用我的浏览器检查过 view-source 并且呈现的两个 CSS 具有相同的内容。

    <head id="j_idt2">
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="/WWHY/faces/javax.faces.resource/bootstrap.min.css?ln=css" />
        <link type="text/css" rel="stylesheet" href="/WWHY/faces/javax.faces.resource/styles.css?ln=css" />
        <title>WWHY IT Support Center</title>
        <script src="resources/js/ie-emulation-modes-warning.js"></script>
    </head>

也许你们知道为什么对字形不起作用。

谢谢！

Answer 1

很可能与 font-awesome 相同。检查 How to use Font Awesome from webjars.org with JSF

尽管在 FA 案例中已经有一个 jsf 特定 css

Bootstrap 的字形不会显示在 <h:outputStylesheet> 中，但会显示在 <link ...> 中

Glyphicons with Bootstrap won't show with <h:outputStylesheet> but with <link ...>

glyphicons

jsf-2.2

twitter-bootstrap-3