Font-Awesome如何让字体扩展？

Question

我拼命想让我的放大镜字体变大.下面的代码在Firefox中运行良好,但在Chrome或IE9中运行不正常.

我错过了什么？

.icon-larger
{
   font-size:50px;
}

<div class="search-icon"><i class="icon-search icon-larger"></i></div>

谢谢!

Answer 1

请查看此页面,查看缩放图标大小的示例.

您可以扩展到它的大小的5倍.

例:

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Answer 2

Font Awesome图标被挂钩到:after伪元素,所以你的CSS需要

.icon-larger:before 
{
  font-size: 50px;
}

我已经为Font Awesome创建了一个所有CSS内容值的参考页面,以及一个CSS片段,其中显示了如何将图标与任何元素一起使用:http://astronautweb.co/snippet/font-awesome/

Answer 3

添加display:block或display:inline-block