Font Awesome

  例子

多种简单方法使用Font Awesome

当你开始使用后, 你可以替换 Font Awesome 图标里面的<i>标签内容。 许多的案例大部分都是重用 Bootstrap文档中的案例。

3.2新增样式

旋转或翻转的图标

  normal
  icon-rotate-90
  icon-rotate-180
  icon-rotate-270
  icon-flip-horizontal
  icon-flip-vertical

堆叠的图标

icon-twitter on icon-check-empty
icon-flag on icon-circle
icon-terminal on icon-sign-blank

更好的项目符号列表

  • New bulleted lists
  • Fix some old bugs
  • And deal with arbitrary
  • Font sizes better

行内图标

Place Font Awesome icons just about anywhere with the <i> tag.

icon-camera-retro 
<i class="icon-camera-retro"></i> icon-camera-retro
Icon classes are echoed via CSS :before.

更大图标

To increase the size of icons relative to its container, use icon-large, icon-2x, icon-3x, or icon-4x.

Increase the icon size by using the icon-large (33% increase), icon-2x, icon-3x, or icon-4x classes.

icon-camera-retro

icon-camera-retro

icon-camera-retro

icon-camera-retro

<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

边框和引用图标

Use icon-border and pull-right or pull-left for easy pull quotes or article graphics.

Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities. 
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Use a few of the new styles together ... lots of new possibilities.
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities. 
<i class="icon-flag icon-4x pull-left icon-border"></i>
Use a few of the new styles together ... lots of new possibilities.

按钮

Reload Checkout

Comment Info

Delete Settings

Font Awesome
Version 3.2.1

Synchronizing Content...

Font Awesome icons work great in buttons. You can even combine them with larger icon styles, pull-right and pull-left, and icon-spin. 

<a class="btn" href="#">
  <i class="icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#">
  <i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#">
  <i class="icon-comment"></i> Comment</a>
<a class="btn btn-small btn-info" href="#">
  <i class="icon-info-sign"></i> Info</a>
<a class="btn btn-danger" href="#">
  <i class="icon-trash icon-large"></i> Delete</a>
<a class="btn btn-small" href="#">
  <i class="icon-cog"></i> Settings</a>
<a class="btn btn-large btn-danger" href="#">
  <i class="icon-flag icon-2x pull-left"></i> Font Awesome<br>Version 3.2.1</a>
<a class="btn btn-primary" href="#">
  <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>

按钮组

<div class="btn-group">
  <a class="btn" href="#"><i class="icon-align-left"></i></a>
  <a class="btn" href="#"><i class="icon-align-center"></i></a>
  <a class="btn" href="#"><i class="icon-align-right"></i></a>
  <a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>

下拉按钮

User 
<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="icon-caret-down"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-fixed-width icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>
Don't forget to add the appropriate JavaScript to enable button dropdowns.

列表

  • Bulleted lists (like this one)
  • Buttons
  • Button groups
  • Navigation
  • Prepended form inputs
  • …and many more with custom CSS

Easily replace individual bullets.

<ul class="icons-ul">
  <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
  <li><i class="icon-li icon-ok"></i>Buttons</li>
  <li><i class="icon-li icon-ok"></i>Button groups</li>
  <li><i class="icon-li icon-ok"></i>Navigation</li>
  <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
  <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
</ul>
Make sure to NOT include any whitespace after the icon declaration.

前置和后置表单输入框中

<form>
  <div class="input-prepend">
    <span class="add-on"><i class="icon-envelope"></i></span>
    <input class="span2" type="text" placeholder="Email address">
  </div>
  <div class="input-prepend">
    <span class="add-on"><i class="icon-key"></i></span>
    <input class="span2" type="password" placeholder="Password">
  </div>
</form>

动画旋转

Use the icon-spin class to get any icon to rotate. Works well with icon-spinner and icon-refresh.
Spinner icon when loading content... 
<i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...

CSS3 animations aren't supported in IE7 - IE9.

旋转和翻转

A set of classes that can be used to arbitrarily rotate and flip icons.
  normal
  icon-rotate-90
  icon-rotate-180
  icon-rotate-270
  icon-flip-horizontal
  icon-flip-vertical 
<i class="icon-shield"></i>&nbsp; normal<br>
<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical

Rotating and flipping icons aren't yet supported in IE7.

堆叠的图标

A method for easily stacking multiple icons. Use the icon-stack class on the parent and icon-stack-base for the bottom icon.
icon-twitter on icon-check-empty
icon-flag on icon-circle
icon-terminal on icon-sign-blank
icon-camera on icon-ban-circle 
<span class="icon-stack">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>
icon-twitter on icon-check-empty<br>
<span class="icon-stack">
  <i class="icon-circle icon-stack-base"></i>
  <i class="icon-flag icon-light"></i>
</span>
icon-flag on icon-circle<br>
<span class="icon-stack">
  <i class="icon-sign-blank icon-stack-base"></i>
  <i class="icon-terminal icon-light"></i>
</span>
icon-terminal on icon-sign-blank<br>
<span class="icon-stack">
  <i class="icon-camera"></i>
  <i class="icon-ban-circle icon-stack-base text-error"></i>
</span>
icon-camera on icon-ban-circle

自定义CSS

Anything you can do with CSS font styles, you can do with Font Awesome.

Star Ratings (inspired by CSS Tricks)