Font Awesome图标字体库使用示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Font Awesome演示</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入Font Awesome-->
<link href="css/font-awesome.min.css?v=4.7.0" rel="stylesheet">
</head>
<body>
<!-- 基本图标(fa+图标名称) -->
<i class="fa fa-camera-retro"></i>
<!-- 大图标(fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x) -->
<i class="fa fa-camera-retro fa-3x"></i>
<!-- 旋转与翻转(fa-rotate-*、 fa-flip-*) -->
<i class="fa fa-arrow-up fa-rotate-90"></i>
<i class="fa fa-arrow-up fa-rotate-270"></i>
<i class="fa fa-arrow-up fa-flip-horizontal"></i>
<i class="fa fa-arrow-up fa-flip-vertical"></i>
<!-- 动画(fa-spin、fa-pulse) -->
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
<!-- 组合使用(fa-stack作为父容器、fa-inverse切换颜色) -->
<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>
</body>
</html>
相关链接
[1].Font Awesome中文网：http://www.fontawesome.com.cn/
[2].Font Awesome图标库：http://www.fontawesome.com.cn/faicons/
[3].Font Awesome案例：http://www.fontawesome.com.cn/examples/
评论（0）
暂无评论。