twitter-bootstrap - 如何使用 jumbotron font awesome 图标变得和 fa 网站上的一样大

Question

在 Font Awesome 网站上，他们总是显示很少的图标尺寸，如下所示: http://fortawesome.github.io/Font-Awesome/icon/server/...而且这些图标的尺寸比常规的 fa-Xx 范围大得多。

据我所知，他们使用 .jumbotron css 类和 .jumbotron-icon 作为容器，大小由 fa-6 设置(数字后没有任何“x”)。我试图通过制作类“jumbotron jumbotron-icon”的容器来应用它，但它不起作用。

该网站基于 Bootstrap。

应该是这样的吗？

<div class="jumbotron jumbotron-icon">
  <div class="someContainerWhereTheFaIconResides">
    <i class="fa fa-server fa-6"></i>
  </div>
</div>

如能提供实现方法，我将不胜感激。

Answer 1

字体大小不是通过 Bootstrap 或 Font-Awesome 中的任何内置类完成的(fa-6 类未在Font Awesome< 中实现/strong>.) 你需要自己编写并应用。如果您检查页面，您会看到这是如何实现的。

参见示例代码段。

.jumbotron-icon .fa-6 {
  font-size: 20em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron jumbotron-icon">
  <div class="container">
    <div class="info-icons">
      <i class="fa fa-server fa-6"></i>&nbsp;&nbsp;
    </div>
  </div>
</div>