字体图标的使用
字体图标的优点：
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
图标库
Iconfont：www.iconfont.cn/
使用方法
Unicode法
- 先引入iconfont.css文件
- 复制粘贴图标对应的Unicode编码
- 设置文字字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
span {
font-family: "iconfont";
font-size: 50px;
color: brown;
}
.s2 {
color: green;
}
</style>
</head>
<body>
<span></span>
<span class="s2"></span>
</body>
</html>
复制代码类名引用
-
先引入iconfont.css文件
-
调用图标对应的类名，必须调用2个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名
-
设置文字字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.s2 {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<span class="iconfont
icon-arrow-up-circle"></span>
<span class="iconfont icon-arrow-right-circle s2"></span>
</body>
</html>
复制代码现在我们来做个购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.s2 {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<span class="iconfont
icon-arrow-up-circle"></span>
<span class="iconfont icon-arrow-right-circle s2"></span>
</body>
</html>
复制代码© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
