我正在尝试在jsf 2.2中创建一个带bootstrap和glypicons的简单页面.我已经包含了webjar的bootstrap依赖项(打开jar我可以看到字体文件存在).

将应用程序部署到wildfly时,bootstrap css正常工作,但显示的图标很糟糕(如默认字体或其他东西).查看浏览器中的网络选项卡,我只看到404错误：

http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff 404

http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf 404

我尝试包含其他依赖项(bootstrap-glypicons),我只得到404错误两次.我错过了什么？

这就是我包括boostrap的方法,它适用于css：

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

这就是我使用css类的方式：

<button><span></span></button>

你应该使用< link>标签而不是< h：outputStylesheet>
例如.

<link rel="stylesheet" type="text/css" media="all" href="webjars/bootstrap/3.1.1/css/bootstrap.min.css"/>

—更新
这是因为JSF中的ResourceHandler将库值(webjars)作为参数添加到URI的末尾：
面/ javax.faces.resource /引导/ 3.1.1 / CSS / bootstrap.min.css？LN = webjars

在bootstrap.min.css CSS中有这样的文件引用：
url(‘../ fonts / glyphicons-halflings-regular.woff’)格式(‘woff’),url(‘../ fonts / glyphicons-halflings-regular.ttf’)格式(‘truetype’),

所以如果你想使用< h：outputStylesheet>您可以编写自己的ResourceHander,也可以编辑bootstrap.min.css并修复glyphicons-halflings-regular.*文件的路径

在我看来,最好使用标准的html标签< link>而不是< h：outputStylesheet>因为JSF组件树会更小并且它会影响性能.在bootstrap.min.css里面没有EL所以不需要使用< h：outputStylesheet>

Bellow是我的HTML(在玉)的字形在附加。

.input-group
    input.form-control(type='text')
    span.input-group-addon.glyphicon.glyphicon-calendar

但是，插件不与输入字段对齐。快照：

是正常的还是bootstrap 3中的错误？

更新

得到它了：
在bootstrap.css：2171(用较少编译)

.glyphicon{ ...; top: 1px; ...}

Bug？

是的，这似乎是我的一个错误：这是一个错误： https://github.com/twbs/bootstrap/issues/10936

我先阅读这个https://github.com/twbs/bootstrap/issues/9850。

我使用这个代码：

<div> 
<br>
<div>
  <span></span>    
  <input type="text"placeholder="Username">
</div>
<br>
<div>
  <span></span>    
  <input type="text"placeholder="Username">
</div>
<br>
<div>
  <input type="text"placeholder="Username">
  <span></span>    
</div>
<br>
<div>
  <input type="text"placeholder="Username">   
  <span></span>    
</div>
<br>
<div>
  <input type="text"placeholder="Username">
  <span></span>    
</div>
<br>
<div>
  <input type="text"placeholder="Username">
  <span></span>    
</div>
<br>
<div>
  <input type="text"placeholder="Username">
  <span><span></span></span>    
</div>
<br>
</div>

Firefox的搜索结果：

：

对于input-group-lg会有一个问题，双跨度使输入更长(由于.glyphicon：empty)，但没有解决问题。
我也没有找到.glyphicon {…; top：1px; …}引起这个问题。

对于firefox我发现这个解决方案：

从bootstrap.css：

.input-group-lg > .form-control,.input-group-lg > .input-group-addon,.input-group-lg > .input-group-btn > .btn {
  height: 45px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

将垂直填充从10px更改为9px解决了问题。

这个css规则来自forms.less(来自inputgroups.less的.input-lg()调用)
using @ padding-large-vertical：10px; (从variables.less)

在google chrome我发现了同样的问题，对于所有尺寸见：

在这种情况下，它有助于使用双跨：

`<span><span></span></span>`

我在网站上使用Bootstrap 3的字形.它在浏览器中工作正常,但在某些设备上没有,因为它显示为问号.

我找到了这个修复：Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webview修复了设备上的问题,但现在glyphicon在Firefox中不起作用. (我正在重写Bootstrap默认设置,以便在我的CSS中使用实际的,非转义的字形.)我想知道是否有办法使用Firefox的浏览器检测编写一些jquery来删除我的CSS文件中的覆盖并将其还原回到Bootstrap的CSS.

我找到了这个用于浏览器检测的jQuery插件：https://github.com/gabceb/jquery-browser-plugin

码：
JS

if ( $.browser.mozilla ) {
    $(''a#calendar span'').removeClass(''glyphicon-calendar'');
    $(''a#calendar span'').css({''glyphicon-calendar:before'': ''content: "\1f4c5"''});
    }

CSS覆盖Bootstrap

/* fix glyph not showing on some devices--override the Bootstrap defaults to use the actual,non-escaped glyphs */ 
.glyphicon-calendar:before { 
  content: "\d83d\dcc5";
  }

Bootstrap的CSS

.glyphicon-calendar:before {
content: "\1f4c5";
}

谢谢您的帮助.

您可以使用.glyphicon-nonescaped类,以允许您在默认的转义和非转义字形之间切换：

HTML

<ihttps://www.jb51.cc/tag/nes/" target="_blank">nescaped"></i>

CSS

.glyphicon-nonescaped.glyphicon-calendar:before { 
    content: "\d83d\dcc5";
}

jQuery的

if($.browser.mozilla) {
    $(''.glyphicon-nonescaped'').removeClass(''glyphicon-nonescaped'');
}

不知道这是否可能，我试图在输入组内的一个glyphicon上调用一个工具提示，我的代码(不起作用)是;

<div>
<input type="text"name="security" id="security"><span><spandata-toggle="tooltip" data-container: 'body' title="" data-original-title="Security Code"></span></span>
</div>

我使用的是Bootstrap 3，最新版本的jQuery。

您可以使用标题属性(在您的示例中为空白)获取一个简单的工具提示。

title="info"

在我的应用程序升级到bootstrap 3.0.0从引导2.3.2之后，它的布局不是很好，似乎是因为在最新版本中缺少引导响应。有没有人知道这里的解决方法？在引导文档中似乎没有什么(至少我找不到)

在Bootstrap 3.0中，没有必要的css。报价 migration guide：

“Mobile first” is a responsive Web design practice that prioritizes consideration of smart phones and mobile devices when creating Web pages. For Bootstrap 3,there is no longer a separate bootstrap-responsive.css file. All responsive features are Now compiled into a single core bootstrap.css file.