Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
基本图标
您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i>
,因为它更简洁。 但实际上使用 <span>
才能更加语义化。
<i class="fa fa-camera-retro"></i> fa-camera-retro
如果您修改了图标容器的字体大小,图标大小会随之改变。同样的变化也会发生在颜色、阴影等其它任何CSS支持的效果上。
大图标
使用 fa-lg
(33%递增)、fa-2x
、 fa-3x
、fa-4x
,或者 fa-5x
类来放大图标。
<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
如果图标的底部和顶部被截断了,您需要增加行高来解决此问题。
动画
使用 fa-spin
类来使任意图标旋转,现在您还可以使用 fa-pulse
来使其进行8方位旋转。尤其适合 fa-spinner
、fa-refresh
和 fa-cog
。
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
Bootstrap3示例
Font Awesome 完全兼容 Bootstrap 的所有组件,示例代码:
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.4.0</a>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
示例效果:
需要支持IE7?
如果需要支持IE7,那真的十分抱歉。Font Awesome从4.1.0版本开始不再支持IE7, 但更早的版本仍然支持。您可以查看 3.2.1 的IE7支持说明。 然后呢,您可以去找那个非要支持IE7的人算账 !
总结:
看到了吧,Font Awesome使用就是如此简单,使用时,你只需要定时<i>
或者<span>
标签,然后再class里加入css前缀fa,再加入图标的名称,搞定!然后你就可以随心所欲的使用它们了。可能你现在需要立即下载Font Awesome,Then go for it 》》Download Font Awesome,Have a good fuck! Oh,no,it’s luck!!!