阿里图标
将小图标定义成字体，通过引入字体的方式来展示这些图标
1.打开阿里图标库 https://www.iconfont.cn/
2.登录 / 注册一个账号
3.选中你需要使用的图标 并且把它加入购物车
4.全部选择完之后 点击右上角 购物车 然后下载代码
5.解压后你下载的文件 然后在文件里面 找到一个叫 demo_index页面 并且打开 里面有详细的方法介绍
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第二种方式 -->
<link rel="stylesheet" href="./阿里图标/iconfont.css">
<style>
/* 第一种方式 */
@font-face {
font-family: 'iconfont';
src: url('./阿里图标/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 36px;
font-style: normal;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
font-size: 100px;
}
</style>
<!-- 第三种方式引入 -->
<script src="./阿里图标/iconfont.js"></script>
</head>
<body>
<!-- 第一种用编码格式 -->
<span class="iconfont"></span>
<p class="iconfont"></p>
<!-- 第二种用类名方式 -->
<span class="iconfont icon-niunai3"></span>
<p class='iconfont icon-xigua1'></p>
<!-- 第三种 支持有颜色的图标使用 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xigua"></use>
</svg>
</body>
</html>效果：
练习1:实现如此效果——https://static.zzhitong.com/lesson-files/html/code/15-1.html
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<script src="./阿里图标/iconfont.js"></script>
<style>
body {
background-color: #EEEEEE;
}
.list {
width: 700px;
height: 250px;
/* background-color: pink; */
margin: 100px auto;
}
.list>li {
float: left;
width: 170px;
height: 80px;
background-color: #fff;
/* border: 1px solid red; */
margin-right: 5px;
margin-bottom: 5px;
}
.ico {
width: 40px;
height: 40px;
/* border: 1px solid red; */
background-image: url(./1.png);
background-repeat: no-repeat;
background-position-y: -160px;
margin: 10px auto 0px;
}
.list>li>p {
text-align: center;
}
/* 高级选择器 选择第二个li子元素 然后在选择对应li里面的第几个子元素 */
.list>li:nth-child(2)>p:nth-child(1) {
background-position-y: -200px;
}
.list>li:nth-child(3)>p:nth-child(1) {
background-position-y: -240px;
}
.list>li:nth-child(4)>p:nth-child(1) {
background-position-y: -280px;
}
.icon {
width: 1em;
height: 1em;
font-size: 45px;
text-align: center;
margin-left: 60px;
}
</style>
</head>
<body>
<ul class="list">
<li>
<!-- 图标 -->
<p class='ico'></p>
<!-- 图标标题 -->
<p>自由行</p>
</li>
<li>
<p class='ico'></p>
<p>主题游</p>
</li>
<li>
<p class='ico'></p>
<p>一日游</p>
</li>
<li>
<p class='ico'></p>
<p>顶级游</p>
</li>
<li>
<p class='ico'></p>
<p>顶级游</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xigua"></use>
</svg>
<p>想吃西瓜</p>
</li>
<li>
<p class='ico'></p>
<p>顶级游</p>
</li><li>
<p class='ico'></p>
<p>顶级游</p>
</li><li>
<p class='ico'></p>
<p>顶级游</p>
</li><li>
<p class='ico'></p>
<p>顶级游</p>
</li><li>
<p class='ico'></p>
<p>顶级游</p>
</li><li>
<p class='ico'></p>
<p>顶级游</p>
</li>
</ul>
</body>
</html>效果如图：
