如何在页面中使用Font Awesome字体图标

Font Awesome字体图标的使用方法

当前位置:主页 > 资料库 > Font Awesome > 如何在页面中使用Font Awesome字体图标
基本使用

Font Awesome字体图标的使用方法非常简单:

1、首先要引入Font Awesome的css样式:<link rel="stylesheet" href="css/font-awesome.min.css">

2、在你想放置图标的地方添加<i>标签(或使用<span>标签),并给<i>添加你想要的图标的class,如下所示:

<i class="fa fa-camera-retro"></i> 注意:第一个fa是必须的。

3、如果在图标后你想添加文字,最好在<i>标签后添加一个空格。

图标尺寸

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

要相对于字体图标的容器增加它们的尺寸,可以使用class fa-lg(增加33%),fa-2xfa-3xfa-4xfa-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-fw可以将图标设置为固定宽度。这在不同宽度的图标要进行对齐时十分有用。特别是在制作导航列表和列表组是特别有用。

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>  Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>  Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>  Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>  Settings</a>
</div>						
					
作为列表图标使用
  • List icons
  • can be used
  • as bullets
  • in lists

使用class fa-ulfa-li可以很容易的将无需列表的图标转换为字体图标。

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-circle "></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="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.

使用class fa-borderfa-pull-rightfa-pull-left可以很容易的制作出文章的引用图标。

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></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.						
					
图标动画

使用class fa-spin可以使任何图标执行旋转动画,使用class fa-pulse可以使图标以8步为周期进行旋转。可以完美执行旋转动画的图标有:fa-spinnerfa-refreshfa-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>						
					
旋转和翻转

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

要任意旋转和翻转图标,可以使用class fa-rotate-*fa-flip-*

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical						
					
堆叠图标
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

要将多个图标堆叠在一起,可以在父元素上使用class fa-stackfa-stack-1x是正常的图标尺寸,fa-stack-2x是大尺寸的图标。fa-inverse可以反转图标的颜色。在父元素还可以使用fa-lg等图标尺寸来设置图标的尺寸。

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera						
					
在Bootstrap 3中使用

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>						
					
CDN加速

你可以使用下面的CDN加速地址来加载Font awesome字体图标:

4.4.0版本的CDN加速地址:

  • maxcdn:https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
  • cdnjs:https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css

4.2.0版本的CDN加速地址:

  • 360:http://libs.useso.com/js/font-awesome/4.2.0/css/font-awesome.min.css
  • maxcdn:https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
  • cdnjs:https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css
官方网站及下载

font awesome官方网站:http://fontawesome.io/

官方下载地址:http://fontawesome.io/#modal-download

GitHub下载地址:https://github.com/FortAwesome/Font-Awesome