increase font awesome icons

问题

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!

回答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/

回答2:

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

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

回答3:

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

回答4:

Font Awesome 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>

来源：https://stackoverflow.com/questions/18688630/increase-font-awesome-icons