以下示例保持简单,并假设使用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
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> Home</a>
<aclass="list-group-item"href="#"><iclass="fa fa-book fa-fw"aria-hidden="true"></i> Library</a>
<aclass="list-group-item"href="#"><iclass="fa fa-pencil fa-fw"aria-hidden="true"></i> Applications</a>
<aclass="list-group-item"href="#"><iclass="fa fa-cog fa-fw"aria-hidden="true"></i> Settings</a>
</div>
使用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— 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-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技巧
考虑到我们对图标可访问性的看法,如果图标只添加了一些额外的装饰或品牌,则无需向用户宣布,因为他们正在浏览您的网站或应用程序。或者,如果图标表达了您的内容或界面中的含义,请确保通过替代显示或文本将此含义传达给辅助技术。
<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>