怎么调整font awesome图标大小?

怎么调整font awesome图标大小?
默认是最小的那个,要用大一点的怎么办呢?

阅读 35.4k
8 个回答

它是一种“图标字体”,所以按照一般字体大小的设置方式来设置,也就是font-size

我们要从原理上来了解 font awesome 字体的大小来如何控制。font awesome 使用了伪类 before 来设置图标,

clipboard.png

clipboard.png

font awesome 是一种字体,控制图标的大小,是通过 font-size 来实现的,before 字体大小 font-size 继承父亲,

clipboard.png

找到对应的元素,修改 font-size 就可以实现控制图标大小了,

clipboard.png

fa-2x fa-3x fa-4x fa-5x

还不够的话就自己设置font-size

可参考fontawesome官网的example ,里面不止有讲到如何调整字体大小还有如何固定宽度以及在特定部位使用图标的tips甚至还可以自己对图标进行旋转等等。
图标大小控制:
直接在对应的图标类名后添加:fa-lg (比默认大小大33%), fa-2x, fa-3x, fa-4x, fa-5x中的任一类名。或者你直接用css的font-size轻松控制喔。

图标字体,按照css控制字体样式规则,直接使用font-size即可

可以直接用css样式控制

新手上路,请多包涵

font-size

新手上路,请多包涵
<i class="fa fa-pause-circle-o fa-2x" aria-hidden="true" style="color:white"></i>其中的fa-2x中的数值就是调整大小,希望可以帮到你
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏