CODEWITHSUNDEEP
twitter-bootstrapcssiconsfont-awesome
Lukas Ladynski
Lukas Ladynski

Reputation: 1

How to use jumbotron font awesome icons to be big as the ones on the fa website

On the Font Awesome website they always show few sizes of the icons, like here: http://fortawesome.github.io/Font-Awesome/icon/server/ ... and these icons get the sizes way bigger than the regular fa-Xx range.

From what I can see they use .jumbotron css class and .jumbotron-icon for the container and the size is set by i.e. fa-6 (without any "x" after the number). I was trying to apply this by making the container of class "jumbotron jumbotron-icon", but it does not work.

The website is based on Bootstrap.

Shall it be something like?

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

I would be thankful for an idea how it shall be implemented.

Upvotes: 0

Views: 1773

Answers (1)

vanburen
vanburen

Reputation: 21663

The font size is not done with any built in classes from Bootstrap or Font-Awesome (The class fa-6 is not implemented in Font Awesome.) You'll need to write and apply your own. If you inspect the page you'll see how this is being acheived.

See example Snippet.

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

Upvotes: 4

Related Questions