increase font awesome icons

Question

I'm having a bit trouble with some font-awesome icons. I'm trying to increase the size of a few of them, but for some reason nothing I seem to do works.

Here is my html

<div class="span5 bookBuild">
 <div class="well well-small">
   <h4>Build your Book!</h4>
   <div class="span2">
      <i class="icon-file icon-large"></i>
   </div><!--span2-->
   <div class="span9">
      <p>This is a paragraph</p>
    </div><!--span9-->
    <p class="clearfix"></p>
   </div><!--well-->
 </div><!--span5-->

and I have tried to add as you can see the icon-large class as well as the icon-2x class. None of the icon-2x - icon-4x are working.

I have also tried targeting the specific icon and then increasing the font size such as font-size: 3em;

Any help would be amazing!

Answer 1

we can make some icon bigger using font awesome. Font awesome provided a class to increse them.

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

http://fortawesome.github.io/Font-Awesome/examples/

Answer 2

This worked for me in bootstrap ONLY after I added !important, like this:

.fa-big{font-size: 100px !important;}