阿里巴巴矢量图标库里有各种类型小图标,引用这些图标代替绘制或PS很方便。
将需要的图标加到自己项目里,会生成链接代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="http:at.alicdn.com/t/font_1589646_bkvz4lg4k0h.css"> <!-- 生成的链接,每次新添加图标后都要更新 -->
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.box1{
width: 654px;
height: 40px;
padding: 10px;
border: 1px solid black;
margin: 50px auto;
position: relative;
}
.box1 .input1{
width: 530px;
height: 40px;
float: left;
padding-left: 10px;
border-top: 1px solid #b8b8b8;
border-left: 1px solid #b8b8b8;
border-bottom: 1px solid #cccccc;
border-right: none;
outline: none;
display: block;
position: relative;
}
.box1 .but1{
width: 110px;
height: 42px;
float: left;
border: none;
background: #3385ff;
color: white;
cursor: pointer;
display: block;
}
a{text-decoration: none;}
.box1 .iconfont{
position: absolute;
font-size: 25px;
top: 18px;
}
.ft1{
right: 130px;
color: #a6a6a6;
}
.ft2{
right: 55px;
color: white;
}
</style>
</head>
<body>
<div class="box1">
<form action="" method="POST">
<input type="text" class="input1">
<input type="button" class="but1">
<!-- 相机图标 -->
<i class="iconfont icon-xiangji ft1"></i>
<!-- <i class="iconfnt 对应图标代码 (自定义)"></i> 自定义类名,方便修改样式 -->
<a href="http://www.baidu.com">
<!-- 搜索图标 -->
<i class="iconfont icon-sousuo ft2"></i>
</a>
</form>
</div>
</body>
</html>