<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Font Awesome,一套绝佳的图标字体库和CSS框架">
<meta name="author" content="极风游科技">
<meta name="keywords" content="Font Awesome,Bootstrap,CSS,图标,字体,icon font,极风游,极风游科技,dashgame">
<link rel="shortcut icon" href="./assets/ico/favicon.ico">
<title>Font Awesome,一套绝佳的图标字体库和CSS框架</title>
<link rel="stylesheet" href="./assets/css/site.css">
<link rel="stylesheet" href="./assets/css/pygments.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="./assets/libs/toastr/toastr.min.css" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/fix.css">
<!--[if lt IE 9]>
<script src="./assets/js/html5shiv.js"></script>
<script src="./assets/js/respond.min.js"></script>
<![endif]-->
<script src="https://use.fonticons.com/ffe176a3.js"></script>
</head>
<body>
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top hidden-print">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-lg"></i>
</button>
<a class="navbar-brand" href="#top"><i class="fa fa-flag"></i> Font Awesome</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="main-nav">
<li class="hidden-sm active"><a href="#wrap">首页</a></li>
<li class="hidden-sm">
<a href="#why">选我!</a>
</li>
<li class="dropdown-split-left"><a href="#new">图标</a></li>
<li class="dropdown dropdown-split-right hidden-xs">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li class="dropdown-header"><i class="fa fa-flag fa-fw"></i> 图标</li>
<li class="divider"></li>
<li><a href="#new"><i class="fa fa-handshake-o fa-fw"></i> 4.7.0版新增</a></li>
<li><a href="#web-application"><i class="fa fa-camera-retro fa-fw"></i> 网页</a></li>
<li><a href="#hand"><i class="fa fa-hand-o-right fa-fw"></i> 手势</a></li>
<li><a href="#accessibility"><i class="fa fa-universal-access fa-fw"></i> 辅助功能</a></li>
<li><a href="#transportation"><i class="fa fa-ship fa-fw"></i> 运输</a></li>
<li><a href="#gender"><i class="fa fa-venus-mars fa-fw"></i> 性别</a></li>
<li><a href="#file-type"><i class="fa fa-file-image-o fa-fw"></i> 文件类型</a></li>
<li><a href="#spinner"><i class="fa fa-spinner fa-fw"></i> 可旋转</a></li>
<li><a href="#form-control"><i class="fa fa-check-square fa-fw"></i> 表单</a></li>
<li><a href="#payment"><i class="fa fa-paypal fa-fw"></i> 支付</a></li>
<li><a href="#chart"><i class="fa fa-line-chart fa-fw"></i> 图表</a></li>
<li><a href="#currency"><i class="fa fa-won fa-fw"></i> 货币</a></li>
<li><a href="#text-editor"><i class="fa fa-file-text-o fa-fw"></i> 文本编辑</a></li>
<li><a href="#directional"><i class="fa fa-hand-o-right fa-fw"></i> 指示方向</a></li>
<li><a href="#video-player"><i class="fa fa-play-circle fa-fw"></i> 视频播放</a></li>
<li><a href="#brand"><i class="fa fa-github fa-fw"></i> 标志</a></li>
<li><a href="#medical"><i class="fa fa-medkit fa-fw"></i> 医疗</a></li>
</ul>
</li>
<li><a href="#getstart">起步</a></li>
<li class="dropdown-split-left"><a href="#basic">示例</a></li>
<li class="dropdown dropdown-split-right hidden-xs">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li class="dropdown-header">示例</li>
<li class="divider"></li>
<li><a href="#basic">基本图标</a></li>
<li><a href="#larger">大图标</a></li>
<li><a href="#fixed-width">固定宽度</a></li>
<li><a href="#list">用于列表</a></li>
<li><a href="#bordered-pulled">边框与对齐</a></li>
<li><a href="#animated">动画</a></li>
<li><a href="#rotated-flipped">旋转与翻转</a></li>
<li><a href="#stacked">组合使用</a></li>
<li><a href="#bootstrap">Bootstrap 3 示例</a></li>
<li><a href="#custom">自定义CSS</a></li>
</ul>
</li>
<li><a href="#community">交流</a></li>
<li><a href="#license">许可协议</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://blog.fontawesome.io" target="_blank">作者博客</a></li>
<li><a href="http://www.dashgame.com" target="_blank">极风游科技</a></li>
</ul>
</div>
</div>
</div>
<div class="jumbotron jumbotron-carousel hidden-print">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 text-center">
<h1>Font Awesome</h1>
<p>一套绝佳的图标字体库和CSS框架</p>
<div class="actions">
<a class="btn btn-default btn-lg" href="./assets/font-awesome-4.7.0.zip">
<i class="fa fa-download fa-lg"></i>
立即下载
</a>
</div>
<div class="shameless-self-promotion">
Version 4.7.0 ·
<a href="https://github.com/FortAwesome/Font-Awesome" onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);" target="_blank">
GitHub项目</a> ·
<a href="http://fontawesome.io/3.2.1">Old 3.2.1 Docs</a> ·
作者 <a href="http://twitter.com/davegandy" target="_blank">Dave Gandy</a>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div id="icon-carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><div><i class="fa fa-font-awesome" aria-hidden="true"></i><span class="sr-only">flag icon</span></div></div>
<div class="item"><div><i class="fa fa-universal-access" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div>
<div class="item"><div><i class="fa fa-fort-awesome" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div>
<div class="item"><div><i class="fa fa-commenting" aria-hidden="true"></i><span class="sr-only">commenting icon</span></div></div>
<div class="item"><div><i class="fa fa-map-signs" aria-hidden="true"></i><span class="sr-only">map signs icon</span></div></div>
<div class="item"><div><i class="fa fa-envelope" aria-hidden="true"></i><span class="sr-only">envelope icon</span></div></div>
<div class="item"><div><i class="fa fa-send-o" aria-hidden="true"></i><span class="sr-only">send icon</span></div></div>
<div class="item"><div><i class="fa fa-book" aria-hidden="true"></i><span class="sr-only">book icon</span></div></div>
<div class="item"><div><i class="fa fa-fighter-jet" aria-hidden="true"></i><span class="sr-only">fighter jet icon</span></div></div>
<div class="item"><div><i class="fa fa-beer" aria-hidden="true"></i><span class="sr-only">beer icon</span></div></div>
<div class="item"><div><i class="fa fa-heart-o" aria-hidden="true"></i><span class="sr-only">heart icon</span></div></div>
<div class="item"><div><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sr-only">thumbs up icon</span></div></div>
<div class="item"><div><i class="fa fa-pied-piper-alt" aria-hidden="true"></i><span class="sr-only">pied piper icon</span></div></div>
</div>
<a class="carousel-control left" href="#icon-carousel" data-slide="prev">
<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#icon-carousel" data-slide="next">
<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<section id