标题: Font Awesome图标字体库使用示例
作者: dnawo
日期: 2019-11-18 02:22 PM
分类: 网页设计
内容: Font Awesome 是一套图标字体库，它提供了大量的用于WEB项目的可缩放矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
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)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.014 ms
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.014 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.029 ms