当前位置：首页 > news >正文

前端——阿里图标的使用

news 2024/11/15 18:06:47

阿里图标

将小图标定义成字体，通过引入字体的方式来展示这些图标

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">&#xe64f;</span><p class="iconfont">&#xe8f4;</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>

效果如图：