网址
/home/index?spm=a313x.7781069.1998910419.2
1、登录
2、在页面中选择需要的图标
### 3、选择“添加入库”
4、点击“添加至项目”（如果没有就创建一个项目）
#### 5、在font class红的情况下，点击“下载至本地”
6、下载后解压打开
7、选择把文件复制到你放的地方，比如
8、在index.html的head里面添加下面一句话
注意：font是我个人文件名，你需要填写自己的文件名
9、在body中填写，注意不能缺少iconfont
10、我的使用场景代码
（1）html中的代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登陆界面</title><link rel="stylesheet" href="login interface.css"><link rel="stylesheet" href="font/iconfont.css"></head><body><div id="bigBox"><h1>登录</h1><div class="inputBox"><div class="inputText"><span class="iconfont icon-yonghuming"></span><input class="" type="text" placeholder="用户名"></div><div class="inputText"><span class="iconfont icon-mima"></span><input class="" type="password" placeholder="密码"></div><input class="inputButton" type="button" value="登录"></div></div></body></html>
（2）css中的代码
body {margin: 0;padding: 0;background-image: url(images/login\ background.jpg);background-repeat: no-repeat;border-style: 100%;background-size: 100%;background-attachment: fixed;background-origin: padding-box;}#bigBox {margin: 0 auto;margin-top: 130px;padding: 20px 50px;background-color: #00000090;width: 400px;height: 300px;border-radius: 10px;text-align: center;}#bigBox h1 {color: azure;}#bigBox .inputBox {margin-top: 50px;}#bigBox .inputBox .inputText {margin-top: 20px;}#bigBox .inputBox .inputText span {color: white;}#bigBox .inputBox .inputText input {border: 0;padding: 10px 10px;border-bottom: 1px solid white;background-color: #00000000;color: white;}#bigBox .inputBox .inputButton {border: 0;width: 150px;height: 25px;color: white;margin-top: 30px;border-radius: 20px;background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);}
(3)运行结果
如果觉得《html使用iconfont-阿里巴巴矢量图标库及登录界面的源码》对你有帮助，请点赞、收藏，并留下你的观点哦！
