Icons

Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and
customize the LESS yourself! Font Awesome even plays nicely withBootstrap 3!

Paste the following code into the section of your site’s HTML.

1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

如果font-awesome.min.css文件在本地,则按一下操作:

进入 fontawesome下载字体和相应的CSS文件。


找到下载压缩文件中的fonts和css文件夹,将其中内容拷贝到自己站点下。

1
2
your blog address\themes\jacman\source\font   修改字体文件
your blog address\jacman\source\css 修改字体相应的css

following code into the section of your site’s HTML.

1
<link href="/css/font-awesome.min.css" rel="stylesheet">

Examples

Basic Icons

fa-camera-retro

1
<i class="fa fa-camera-retro"></i> fa-camera-retro

Larger Icons

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

1
2
3
4
5
<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

Fixed Width Icons

  Home
  Library
  Applications
  Settings

1
2
3
4
5
6
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

List Icons

  • List icons

  • can be used

  • as bullets

  • in lists

  • 1
    2
    3
    4
    5
    6
    <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-square"></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>

    Bordered & Pulled Icons


    …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.

    1
    2
    3
    4
    <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.

    Animated Icons






    1
    2
    3
    4
    5
    <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>

    Rotated & Flipped

    normal

    fa-rotate-90

    fa-rotate-180

    fa-rotate-270

    fa-flip-horizontal

    icon-flip-vertical

    1
    2
    3
    4
    5
    6
    <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

    Stacked Icons





    fa-twitter on fa-square-o





    fa-flag on fa-circle





    fa-terminal on fa-square





    fa-ban on fa-camera

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <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 Examples


    Delete


    Settings


    Font Awesome
    Version 4.4.0














    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <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><a href="#"><i class="i"></i> Make admin</a></li>
    </ul>
    </div>

    Contribution from :http://fontawesome.io/examples/

    tiramisutes wechat
    欢迎关注