font awesome字体引用
官网
http://fontawesome.dashgame.com/
1.官网下载字体
点击下载并解压复制到项目路径下
2.在html中引用图标样式
3.开始使用图标
使用方法：标签<i></i>或者<span></span>, CSS前缀fa ，再加上图标名称
先找到某个要使用的图标，例如：address-book-o
代码中使用：
4.图标相当于字体，可以添加颜色，字体大小
下面是练习的html代码
HTML代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font awesome图标引用</title>
<!-- 引用Font Awesome样式 -->
<link rel="stylesheet" href="css/font-awesome.css" >
<style>
.wrap{
background: lightblue;
min-height: 100px;
padding: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<i class="fa fa-camera-retro fa-lg" style="color: white;"></i>
<i class="fa fa-coffee"></i>
<i class="fa fa-spinner fa-spin"></i>
<span class="fa fa-address-book-o"></span>
<span class="fa fa-address-book-o" style="color:white;font-size: 32px;"></span>
<i class="fa fa-cc"></i>
<i class="fa fa-github-alt"></i>
</div>
</body>
</html>
效果显示：
以上练习结束。。
网友评论