fontawesome链接： https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
注：不需要下载或安装，直接使用使用link标签添加fontawesome链接即可。
Font Awesome到哪查询呢？它有官网（https://fontawesome.com/），在这里我们可以看到它的真正的最新版，还可以查看各种图标。
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.input-icons i {
position: absolute;
}
.input-icons {
width: 100%;
margin-bottom: 10px;
}
.icon {
padding: 10px;
min-width: 40px;
}
.input-field {
width: 100%;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h3>Input元素内的图标</h3>
<div style="max-width:400px;margin:auto">
<div class="input-icons">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text">
<i class="fa fa-instagram icon"></i>
<input class="input-field" type="text">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text">
<i class="fa fa-venus-mars icon"></i>
<input class="input-field" type="text">
<i class="fa fa-android icon"></i>
<input class="input-field" type="text">
</div>
</div>
</body>
</html>效果图：
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.input-icons i {
position: absolute;
}
.input-icons {
width: 100%;
margin-bottom: 10px;
}
.icon {
padding: 10px;
color: red;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
text-align: center;
}
h2 {
color: red;
}
</style>
</head>
<body>
<center>
<form style="max-width:450px;margin:auto">
<h2>登录</h2>
<div class="input-icons">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Username">
</div>
<div class="input-icons">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="Email">
</div>
<div class="input-icons">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" placeholder="Password">
</div>
</form>
</center>
</body>
</html>效果图：
以上就是CSS如何在input元素中添加小图标？的详细内容，更多请关注0133技术站其它相关文章！
