下一节:

  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-2x，fa-3x，fa-4x 或 fa-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-ul 和 fa-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-border，fa-pull-right 或 fa-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>
    尝试一下
下一节: