Zoom font amazing icons

Question

I am having problems with some font icons. I am trying to increase the size of some of them, but for some reason I am not doing anything.

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 tried to add, as you can see the icon-large class as well as the icon-2x class. None of icon-2x - icon-4x works.

I also tried to target a specific icon, and then increased the font size, for example font-size: 3em;

Any help would be awesome!

Answer 1

we can make the icon larger using the awesome font. The awesome font provided a class to cut them out.

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

http://fortawesome.imtqy.com/Font-Awesome/examples/

Answer 2

This worked for me in bootstrap ONLY after adding !important , for example:

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

Answer 3

Use icon-4x instead of icon-large . See Here: http://bootply.com/79841

Answer 4

Awesome font is a font, so add a class and increase the font size

  .fa-big{ font-size: 100px; } <i class="fa fa-ship fa-big"></i>