FontAwesome 教程

  • 什么是 FontAwesome 字体

    FontAwesome 字体是一种带有网页功能的象形文字语言,并收集在一个集合里。
    FontAwesome 字体不需要 javascript,这样可以的兼容各大主流的浏览器。
    FontAwesome 可以轻松的用css来控制字体的颜色,大小,阴影等!
    FontAwesome 字体可缩放的矢量图形,每个图标在放大或者缩小的时候看起来都正常。
    fontawesome
    我们将在本教程中使用的 Font Awesome 版本是 4.7.0。
  • 如何使用

    要使用 Font Awesome 图标,请在 HTML 页面的<head>部分内添加以下行:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body></body>
    </html>
    
    
    注意:无需下载或安装!

    示例如下代码:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    <i class="fa fa-car"></i>
    <i class="fa fa-car" style="font-size:48px;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    </body>
    </html>
    
    
    尝试一下
    输出结果如下:
         
    Font Awesome 与内联元素一起使用;<i>和<span>元素广泛用于图标。
    另请注意,如果您更改图标容器的字体大小或颜色,则图标也会更改。 阴影和使用CSS继承的其他任何东西也一样。
  • 较大的图标

    fa-lg(增加33%),fa-2xfa-3xfa-4xfa-5x 类用于相对于其容器增加图标大小。

    示例如下代码:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    <i class="fa fa-car fa-lg"></i>
    <i class="fa fa-car fa-2x"></i>
    <i class="fa fa-car fa-3x"></i>
    <i class="fa fa-car fa-4x"></i>
    <i class="fa fa-car fa-5x"></i>
    </body>
    </html>
    
    
    尝试一下
    输出结果如下:
             
    提示:如果您的图标在顶部和底部被切掉,请增加行高。
  • List 图标

    fa-ulfa-li 类用于替换无序列表中的默认项目符号。

    示例如下代码:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    <ul class="fa-ul">
    <li><i class="fa-li fa fa-check-square"></i>List icons</li>
    <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
    <li><i class="fa-li fa fa-square"></i>List icons</li>
    </ul> 
    </body>
    </html>
    
    
    尝试一下
    输出结果如下:
    •  List icons
    •  List icons
    •  List icons
  • 带边框的图标

    fa-borderfa-pull-rightfa-pull-left 类用于拉引号或文章图标。

    示例如下代码:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    <i class="fa fa-quote-left fa-2x fa-pull-left fa-border"></i>
    Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in volttable velit esse cillum dolore eu fugiat nulla pariatur。
    </ul> 
    </body>
    </html>
    
    
    尝试一下
    输出结果如下:
      Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in volttable velit esse cillum dolore eu fugiat nulla pariatur。
  • 动画图标

    fa-spin 类使任何图标旋转,而 fa-pulse 类使任何图标旋转8步。

    示例如下代码:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    <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>
    </ul> 
    </body>
    </html>
    
    
    尝试一下
    输出结果如下:
             
    注意,IE8 和 IE9 不支持 CSS3 动画
  • 旋转和翻转图标

    fa-rotate-*fa-flip-* 类用于旋转和翻转图标。

    示例如下代码:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    <i class="fa fa-shield"></i>
    <i class="fa fa-shield fa-rotate-90"></i>
    <i class="fa fa-shield fa-rotate-180"></i>
    <i class="fa fa-shield fa-rotate-270"></i>
    <i class="fa fa-shield fa-flip-horizontal"></i>
    <i class="fa fa-shield fa-flip-vertical"></i>
    </body>
    </html>
    
    
    尝试一下
    输出结果如下:
               
  • 堆叠图标

    要堆叠多个图标,请在父级上使用 fa-stack 类,对于常规尺寸的图标使用 fa-stack-1x 类,对于较大的图标使用fa-stack-2x
    fa-inverse 类可用作替代图标的颜色。 您还可以将较大的图标类添加到父级,以进一步控制尺寸。

    示例如下代码:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    <span class="fa-stack fa-lg">
    <i class="fa fa-circle-thin fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
    </span>
    fa-twitter on fa-circle-thin<br>
    
    <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
    </span>
    fa-twitter (inverse) on fa-circle<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" style="color:red;"></i>
    </span>
    fa-ban on fa-camera
    </body>
    </html>
    
    
    尝试一下
    输出结果如下:
        fa-twitter on fa-circle-thin
        fa-twitter (inverse) on fa-circle
        fa-ban on fa-camera
  • 固定宽度图标

    fa-fw 类用于将图标设置为固定宽度;当不同的图标宽度导致对齐失败时,此类非常有用。

    示例如下代码:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
    <div class="list-group">
    <a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
    <a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
    <a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
    <a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
    </div>
    </body>
    </html>
    
    
    尝试一下