带有 Bootstrap 的字形图标不会在 <h:outputStylesheet> 中显示，而是在 <link ...> 中显示答案

【问题标题】：Glyphicons with Bootstrap won't show with <h:outputStylesheet> but with <link ...>带有 Bootstrap 的字形图标不会在 <h:outputStylesheet> 中显示，而是在 <link ...> 中显示
【发布时间】：2015-04-02 07:24:10
【问题描述】：

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

在您网站的标题部分，您将包含引导程序通过

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

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

谢谢！

【问题讨论】：

标签： twitter-bootstrap-3 jsf-2.2 glyphicons

【解决方案1】：

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

虽然在 FA 案例中已经有一个 jsf 特定的 css

【讨论】：