increase font awesome icons

假装没事ソ 提交于 2021-02-05 02:24:30

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!