Font Awesome中文网

  例子

有很多简单的方法可以使用Font Awesome

当您启动和运行，您可以将字体真棒图标几乎与任何地方的标签。从Bootstrap文档中重新使用了一些示例。

以下示例保持简单，并假设使用Font Awesome CDN，它提供自动可访问性支持。如果您没有使用Font Awesome CDN，请参阅手册辅助功能示例，并阅读有关使所有用户的图标更加精彩的更多信息

基本图标

Example: basic iconfa-camera-retro

您可以使用CSS前缀fa和图标的名称在任何地方放置Font Awesome图标。Font Awesome旨在与内联元素一起使用（我们喜欢<i>标签以简洁，但使用a <span>在语义上更正确）。

<iclass="fa fa-camera-retro"></i> fa-camera-retro
  • Example: basic icon如果更改图标容器的字体大小，则图标会变大。颜色，投影以及使用CSS继承的任何其他内容也是如此。

更大的图标

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

为了增加图标大小相对于它们的容器中，使用fa-lg (33％增加), fa-2x,fa-3x, fa-4x, 或 fa-5x 类。

<iclass="fa fa-camera-retro fa-lg"></i> fa-lg
<iclass="fa fa-camera-retro fa-2x"></i> fa-2x
<iclass="fa fa-camera-retro fa-3x"></i> fa-3x
<iclass="fa fa-camera-retro fa-4x"></i> fa-4x
<iclass="fa fa-camera-retro fa-5x"></i> fa-5x
  • 如果您的图标在顶部和底部被切断，请确保您有足够的线高。

固定宽度图标

  Home  Library  Applications  Settings

用于fa-fw以固定宽度设置图标。当不同的图标宽度甩开对齐时很好用。特别适用于导航列表和列表组。

<divclass="list-group">
  <aclass="list-group-item"href="#"><iclass="fa fa-home fa-fw"aria-hidden="true"></i>&nbsp; Home</a>
  <aclass="list-group-item"href="#"><iclass="fa fa-book fa-fw"aria-hidden="true"></i>&nbsp; Library</a>
  <aclass="list-group-item"href="#"><iclass="fa fa-pencil fa-fw"aria-hidden="true"></i>&nbsp; Applications</a>
  <aclass="list-group-item"href="#"><iclass="fa fa-cog fa-fw"aria-hidden="true"></i>&nbsp; Settings</a>
</div>

列表图标

  • List icons
  • can be used
  • as bullets
  • in lists

使用fa-ul和fa-li轻松替换无序列表中的默认项目符号。

<ulclass="fa-ul">
  <li><iclass="fa-li fa fa-check-square"></i>List icons</li>
  <li><iclass="fa-li fa fa-check-square"></i>can be used</li>
  <li><iclass="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><iclass="fa-li fa fa-square"></i>in lists</li>
</ul>

有边界和拉扯的图标

…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

使用fa-border 和 fa-pull-right 或 fa-pull-left 轻松拉引号或文章图标。

<iclass="fa fa-quote-left fa-3x fa-pull-left fa-border"aria-hidden="true"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning&mdash; So we beat on, boats against the
current, borne back ceaselessly into the past.

动画的图标

Loading example (with fa-spinner icon)Loading (with fa-circle-o-notch icon)Loading example (with fa-refresh icon)Loading example (with fa-cog icon)Loading example (with fa-spinner icon)

使用fa-spin 该类可以旋转任何图标，并使用fa-pulse它以8步旋转。效果很好用fa-spinner, fa-refresh, 和 fa-cog.

<iclass="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<spanclass="sr-only">Loading...</span>

<iclass="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<spanclass="sr-only">Loading...</span>


<iclass="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<spanclass="sr-only">Loading...</span>

<iclass="fa fa-cog fa-spin fa-3x fa-fw"></i>
<spanclass="sr-only">Loading...</span>

<iclass="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<spanclass="sr-only">Loading...</span>

Note:某些平台上的某些浏览器存在动画图标问题，导致抖动抖动效果。有关 示例和可能的解决方法

Note: IE8 - IE9不支持CSS3动画。

旋转和翻转

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

要任意旋转和翻转图标，请使用fa-rotate-* 和 fa-flip-* 类。

<iclass="fa fa-shield"></i> normal<br>
<iclass="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<iclass="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<iclass="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<iclass="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<iclass="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

堆积的图标

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

要堆叠多个图标，请使用fa-stack父级上的类，fa-stack-1x常规大小的图标以及fa-stack-2x较大的图标。 fa-inverse可以用作替代图标颜色。您甚至可以在父级上放置更大的图标类，以进一步控制大小调整。

<spanclass="fa-stack fa-lg">
  <iclass="fa fa-square-o fa-stack-2x"></i>
  <iclass="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<spanclass="fa-stack fa-lg">
  <iclass="fa fa-circle fa-stack-2x"></i>
  <iclass="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<spanclass="fa-stack fa-lg">
  <iclass="fa fa-square fa-stack-2x"></i>
  <iclass="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<spanclass="fa-stack fa-lg">
  <iclass="fa fa-camera fa-stack-1x"></i>
  <iclass="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

Bootstrap 3示例

Delete Settings

Font Awesome
Version 4.7.0

User

Font Awesome适用于各种Bootstrap组件。

<aclass="btn btn-danger"href="#">
  <iclass="fa fa-trash-o fa-lg"></i> Delete</a>
<aclass="btn btn-default btn-sm"href="#">
  <iclass="fa fa-cog"></i> Settings</a>

<aclass="btn btn-lg btn-success"href="#">
  <iclass="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.7.0</a>

<divclass="btn-group">
  <aclass="btn btn-default"href="#">
    <iclass="fa fa-align-left"title="Align Left"></i>
  </a>
  <aclass="btn btn-default"href="#">
    <iclass="fa fa-align-center"title="Align Center"></i>
  </a>
  <aclass="btn btn-default"href="#">
    <iclass="fa fa-align-right"title="Align Right"></i>
  </a>
  <aclass="btn btn-default"href="#">
    <iclass="fa fa-align-justify"title="Align Justify"></i>
  </a>
</div>

<divclass="input-group margin-bottom-sm">
  <spanclass="input-group-addon"><iclass="fa fa-envelope-o fa-fw"></i></span>
  <inputclass="form-control"type="text"placeholder="Email address">
</div>
<divclass="input-group">
  <spanclass="input-group-addon"><iclass="fa fa-key fa-fw"></i></span>
  <inputclass="form-control"type="password"placeholder="Password">
</div>

<divclass="btn-group open">
  <aclass="btn btn-primary"href="#"><iclass="fa fa-user fa-fw"></i> User</a>
  <aclass="btn btn-primary dropdown-toggle"data-toggle="dropdown"href="#">
    <spanclass="fa fa-caret-down"title="Toggle dropdown menu"></span>
  </a>
  <ulclass="dropdown-menu">
    <li><ahref="#"><iclass="fa fa-pencil fa-fw"></i> Edit</a></li>
    <li><ahref="#"><iclass="fa fa-trash-o fa-fw"></i> Delete</a></li>
    <li><ahref="#"><iclass="fa fa-ban fa-fw"></i> Ban</a></li>
    <liclass="divider"></li>
    <li><ahref="#"><iclass="fa fa-unlock"></i> Make admin</a></li>
  </ul>
</div>

自定义CSS

你可以使用CSS字体样式做任何事情，你可以使用Font Awesome。

星级评分（灵感来自CSS技巧

无障碍观点一致

Refreshing...Saving. Hang tight!

Battery level: 50%

考虑到我们对图标可访问性的看法，如果图标只添加了一些额外的装饰或品牌，则无需向用户宣布，因为他们正在浏览您的网站或应用程序。或者，如果图标表达了您的内容或界面中的含义，请确保通过替代显示或文本将此含义传达给辅助技术。

<aclass="btn btn-default"href="path/to/settings"aria-label="Settings">
  <iclass="fa fa-cog"aria-hidden="true"></i>
</a>

<aclass="btn btn-danger"href="path/to/settings"aria-label="Delete">
  <iclass="fa fa-trash-o"aria-hidden="true"></i>
</a>

<aclass="btn btn-primary"href="#navigation-main"aria-label="Skip to main navigation">
  <iclass="fa fa-bars"aria-hidden="true"></i>
</a>

<iclass="fa fa-refresh fa-spin fa-3x fa-fw"aria-hidden="true"></i>
<spanclass="sr-only">Refreshing...</span>

<iclass="fa fa-cog fa-spin fa-3x fa-fw"aria-hidden="true"></i>
<spanclass="sr-only">Saving. Hang tight!</span>

<divclass="input-group margin-bottom-sm">
  <spanclass="input-group-addon"><iclass="fa fa-envelope-o fa-fw"aria-hidden="true"></i></span>
  <inputclass="form-control"type="text"placeholder="Email address">
</div>
<divclass="input-group">
  <spanclass="input-group-addon"><iclass="fa fa-key fa-fw"aria-hidden="true"></i></span>
  <inputclass="form-control"type="password"placeholder="Password">
</div>

<ahref="path/to/shopping/cart"class="btn btn-primary"aria-label="View 3 items in your shopping cart">
  <iclass="fa fa-shopping-cart"aria-hidden="true"></i>
</a>

<iclass="fa fa-battery-half"aria-hidden="true"></i>
<spanclass="sr-only">Battery level: 50%</span>