前端——阿里图标的使用
阿里图标
将小图标定义成字体，通过引入字体的方式来展示这些图标
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>效果如图：
