1.font awesome
(1)在官网上下载图标库文件
(2) 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css"> 引入图标库
<style>
span.plane{ //span标签.对应图标所设置的属性值对相应图标进行操作
color:#ccc; //图标颜色
font-size:100px; //图标大小
}
span:hover{
color:blue;
}
i{
font-size:10px;
}
</style>
</head>
<body>
<span class="fa fa-plane plane"></span> //引用图标 class="fa fa-图标名称 设置class属性值"
<i class="fa fa-pencil"></i>
</body>
</html>
2.iconfont
(1)进入官网找到所需图标加入购物车
(2)添加至项目,点击确定
(4)点击下载至本地
(5)复制图标代码
(6)代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../iconfont/iconfont.css">
</head>
<body>
<span class="iconfont icon-wode"></span> //class="iconfont 下载的图标的代码“
<i class="iconfont icon-youjiantou"></i>
<i class="iconfont icon-zuojiantou"></i>
</body>
</html>