html使用阿里巴巴图标库

最新推荐文章于 2024-08-17 21:52:26 发布

zyx127

最新推荐文章于 2024-08-17 21:52:26 发布

阅读量616

点赞数 1

文章标签： ico

本文链接：https://blog.csdn.net/zyx127/article/details/108509186

版权

使用ico字体图标

登录阿里巴巴矢量图标库

https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4

把想要的图标添加购物车-添加项目

在这里插入图片描述

打开项目，选择“Unicode” 类型，点击下载至本地

在这里插入图片描述

解压缩iconfont.css放入代码文件夹中

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>
</head>
<body>
    <!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
	<!--引入iconfont.css文件-->
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <title>html使用阿里图标库（iconfont）制作字体图标</title>
	<style>
	.myicon{
		font-size: 16px;
		margin-right:10px;
		color:#777;
	}
	ul li{list-style:none;}
	</style>
</head>
<body>
<ul>
	<li><i class="iconfont myicon">&#xe604;</i>团队信息</li>
	<li><i class="iconfont myicon">&#xe61e;</i>我的团队</li>
</ul>	 
</body>
</html>