使用 iconfont 引入字体
1.第一步
网址输入关键字 “iconfont” 进入官网
2.第二步
3.第三步
4.第四步
解压后,将解压文件移动至项目中
5.第五步
6.第六步
使用方式有三种
以下是参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入字体图标 -->
<link rel="stylesheet" href="../iconfont/iconfont.css">
<title>Document</title>
<style>
/* 方式一 */
.c1 {
font-size: 100px;
}
/* 方式二 */
.c2 {
font-size: 150px;
}
/* 方式三,伪类形式 */
.c3::before {
content: '\e657';
font-family: 'iconfont';
font-size: 200px;
}
</style>
</head>
<body>
<!-- 使用方式一:实体类 -->
<i class="c1 iconfont"></i>
<!-- 方式二:使用类形式-->
<i class="c2 iconfont icon-8 "></i>
<!-- 方式三:使用伪类 -->
<i class="c3"></i>
</body>
</html>