我想用glyphicon-facebook. < i class =“glyphicon glyphicon-search”>有效,但为什么不< i class =“glyphicon-facebook”>工作？并且没有诸如’glyphicon glyphicon-facebook’之类的选项.

Bootstrap字形库中没有glyphicon-facebook字形：
http://getbootstrap.com/components/

看看fontastic.me.你可以创建自定义的字形集,并有一吨免费的字形可供选择,包括facebook glphys.

另一种选择是icomoon.io

我现在使用Twitter Bootstrap 3 RC2以及已经移动到单独的存储库的Twitter Bootstrap。我注意到，如果使用在带有文本的按钮，图标不是很好的中心：

图标和文本具有相同的底线，但我相信一个好看的按钮图标应该基于文本居中，应该不是吗？任何想法如何实现这一点？

http://bootply.com/74652

将文字移出< span>与glyphicon并应用vertical-align：中间到< span>

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

Demo

我不得不选择bootstrap-sass和twitter-bootstrap-rails,我根据网络上的建议选择了第一个.

但是,我看到twitter-bootstrap-rails gem有一些用于应用程序布局的生成器.喜欢,

rails g bootstrap:layout application fixed
rails g bootstrap:themed Posts

我认为这对于启动项目非常有用.但是我没有在bootstrap-sass gem中找到类似的生成器.运行命令：

rails generate

没有像以前那样显示任何生成器.

有没有办法让这些布局使用bootstrap-sass而不是使用twitter-bootstrap-rails？

提前致谢.

我正在使用这个宝石,虽然我不知道它的生成器.

我在GitHub上找到了一个你可能会觉得有用的宝石：

https://github.com/decioferreira/bootstrap-generators

或者,您可以简单地定义一个新的custom.css.scss文件,并开始使用整个应用程序的CSS.并且不要忘记将bootstrap导入添加到您的文件中！

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'');
}