html使用阿里图标库（iconfont）制作字体图标
程序员文章站
2022-03-31 20:03:06
...
话不多说，先看一下效果图：
一、通过阿里图标库生成iconfont.css
1、登录阿里图标库官网https://www.iconfont.cn/，新建一个项目，例如我新建的项目是my-icon
2、把需要的图标加入购物车，然后再添加到项目里
3、打开项目，选择“Unicode” 类型，点击下载至本地
4、把刚才下载的文件解压，我们只需要解压文件里面的iconfont.css，其他都不需要。
二、在html上使用iconfont.css图标
<!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{width:50%;border:1px solid #ccc;padding:10px;text-align:center;}
ul li{list-style:none;}
</style>
</head>
<body>
<ul>
<li><i class="iconfont myicon"></i>团队信息</li>
<li><i class="iconfont myicon"></i>我的团队</li>
<li><i class="iconfont myicon"></i>结算记录</li>
<li><i class="iconfont myicon"></i>充值记录</li>
<li><i class="iconfont myicon"></i>交易明细</li>
<li><i class="iconfont myicon"></i>手机号码</li>
</ul>
</body>
</html>