例子

有很多简单的方法可以使用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
  • 如果您的图标在顶部和底部被切断,请确保您有足够的线高。

用于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-ulfa-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-borderfa-pull-rightfa-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

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字体样式做任何事情,你可以使用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>